Update tag page

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>
     );

src/app/tags/[tag].tsx → src/app/tags/[slug]/page.tsx

@@ -6,20 +6,30 @@ 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">
       <div className="pt-10 sm:pl-10 sm:pr-20 lg:pl-20 lg:pr-40 space-y-1">
         <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>
   );
 }