From 141abc130eb5088297379ff9c7ed524aa1d70ccf Mon Sep 17 00:00:00 2001
From: Tigor Hutasuhut <tigor.hutasuhut@gmail.com>
Date: Sun, 28 Apr 2024 10:25:09 +0700
Subject: [PATCH] home: update recently added cards to be horizontally placed

---
 views/homeview/homeview.templ                 |  6 +---
 ..._card.templ => recently_added_image.templ} | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 15 deletions(-)
 rename views/homeview/{recently_added_image_card.templ => recently_added_image.templ} (51%)

diff --git a/views/homeview/homeview.templ b/views/homeview/homeview.templ
index cc365b4..45a3652 100644
--- a/views/homeview/homeview.templ
+++ b/views/homeview/homeview.templ
@@ -29,11 +29,7 @@ templ home(_ *views.Context, data Data) {
 	<div class="prose">
 		<section class="mb-4 mx-auto">
 			<h1>Recently Added</h1>
-			<div class="flex gap-4 flex-wrap pb-4 pr-8 w-[100vw] lg:w-[80vw] justify-around">
-				for _, image := range data.RecentlyAddedImages.Images {
-					@RecentlyAddedImageCard(image, 0)
-				}
-			</div>
+			@RecentlyAddedImageList(data.RecentlyAddedImages.Images, 0)
 		</section>
 		<section>
 			<h1>Subreddits</h1>
diff --git a/views/homeview/recently_added_image_card.templ b/views/homeview/recently_added_image.templ
similarity index 51%
rename from views/homeview/recently_added_image_card.templ
rename to views/homeview/recently_added_image.templ
index e64422c..8165a54 100644
--- a/views/homeview/recently_added_image_card.templ
+++ b/views/homeview/recently_added_image.templ
@@ -18,13 +18,13 @@ const (
 )
 
 templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
-	<div class="not-prose card bg-base-100 shadow-xl w-[250px]">
+	<div class="not-prose card card-bordered bg-base-100 shadow-xl w-[256px] min-w-[256px]">
 		<figure>
 			<a
 				href={ templ.URL(fmt.Sprintf("/img/%s", data.ImageRelativePath)) }
 			>
 				<img
-					class="object-contain w-[250px] h-[250px]"
+					class="object-contain w-[256px] h-[256px]"
 					src={ fmt.Sprintf("/img/%s", data.ThumbnailRelativePath) }
 					alt={ data.Title }
 				/>
@@ -34,18 +34,28 @@ templ RecentlyAddedImageCard(data *models.Image, opts ImageCardOption) {
 			if !opts.Has(HideTitle) {
 				<a
 					href={ templ.URL(data.PostURL) }
-					class="card-title font-normal underline text-base text-primary-content"
+					class="card-title font-bold underline text-base text-primary-content"
 				>{ data.Title }</a>
 			}
 			<a class="text-primary-content underline" href={ templ.URL(data.PosterURL) }>{ data.Poster }</a>
-			if data.R.Subreddit != nil {
-				if !opts.Has(HideSubreddit) {
-					<a
-						class="text-primary-content underline text-base"
-						href={ templ.URL(fmt.Sprintf("https://reddit.com/%s/%s", reddit.SubredditType(data.R.Subreddit.Subtype), data.R.Subreddit.Name)) }
-					>{ data.R.Subreddit.Name } </a>
+			<div class="card-actions justify-between">
+				if data.R.Subreddit != nil {
+					if !opts.Has(HideSubreddit) {
+						<a
+							class="badge badge-outline"
+							href={ templ.URL(fmt.Sprintf("https://reddit.com/%s/%s", reddit.SubredditType(data.R.Subreddit.Subtype), data.R.Subreddit.Name)) }
+						>{ data.R.Subreddit.Name } </a>
+					}
 				}
-			}
+			</div>
 		</div>
 	</div>
 }
+
+templ RecentlyAddedImageList(images models.ImageSlice, opts ImageCardOption) {
+	<div class="w-[100vw] lg:w-[80vw] overflow-x-scroll flex gap-4 p-8 shadow-inner bg-base-300">
+		for _, data := range images {
+			@RecentlyAddedImageCard(data, opts)
+		}
+	</div>
+}