From 0e37ca0b2fae607234bbdb99e59accb4e2d5515d Mon Sep 17 00:00:00 2001
From: Aaron Agarunov <agarunov.aaron@gmail.com>
Date: Fri, 31 May 2024 22:15:10 -0400
Subject: [PATCH] Update tag page

---
 src/app/[slug]/chip.tsx                     |  9 +++++++--
 src/app/tags/{[tag].tsx => [slug]/page.tsx} | 18 ++++++++++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)
 rename src/app/tags/{[tag].tsx => [slug]/page.tsx} (59%)

diff --git a/src/app/[slug]/chip.tsx b/src/app/[slug]/chip.tsx
index c580724..cad51b9 100644
--- a/src/app/[slug]/chip.tsx
+++ b/src/app/[slug]/chip.tsx
@@ -22,7 +22,7 @@ export function useTags(
 function dateFromTag(tag: Tag) {
   // either begins with `20##`, or `20##` is preceded by non-digit
   // e.g. '20241231...', 'IMG_20241231...'
-  return tag?.match(/(?:^20|[^\d]20)\d{2}/g)?.[0];
+  return tag?.match(/(?:^20|[^\d]20)\d{2}/g)?.[0]?.trim();
 }
 
 export function TagChip({ tag }: { tag: Tag }) {
@@ -36,7 +36,12 @@ export function TagChip({ tag }: { tag: Tag }) {
 
   if (date) {
     return (
-      <Link key={tag} href={`/tags/${date}`} className="hover:bg-gray-300">
+      <Link
+        key={tag}
+        href={`/tags/${date}`}
+        className="hover:bg-gray-200/50"
+        prefetch={false}
+      >
         {chip}
       </Link>
     );
diff --git a/src/app/tags/[tag].tsx b/src/app/tags/[slug]/page.tsx
similarity index 59%
rename from src/app/tags/[tag].tsx
rename to src/app/tags/[slug]/page.tsx
index 00809f5..2d024a7 100644
--- a/src/app/tags/[tag].tsx
+++ b/src/app/tags/[slug]/page.tsx
@@ -6,12 +6,12 @@ export async function generateStaticParams() {
   const start = 2015;
   const end = new Date().getFullYear();
   return Array.from({ length: end - start + 1 }, (_, i) => ({
-    slug: start + i
+    slug: (start + i).toString()
   }));
 }
 
-async function Tag({ params: { tag } }: { params: { tag: string } }) {
-  const [albums, photos] = await Promise.all([getAlbums(), getPhotos(tag)]);
+async function Tag({ params: { slug } }: { params: { slug: string } }) {
+  const [albums, photos] = await Promise.all([getAlbums(), getPhotos(slug)]);
 
   return (
     <section className="flex flex-col sm:flex-row sm:my-20">
@@ -19,7 +19,17 @@ async function Tag({ params: { tag } }: { params: { tag: string } }) {
         <Nav albums={albums} />
       </div>
 
-      <Masonry className="my-12" items={photos} />
+      <div className="flex-col">
+        <div
+          className={`mt-12 inline-block px-2 py-1
+          border-dashed border border-gray-200 rounded-md
+          bg-gray-100 text-gray-500`}
+        >
+          {slug}
+        </div>
+
+        <Masonry className="my-6" items={photos} />
+      </div>
     </section>
   );
 }