Add view transitions for blog's title and date

mellevanderlinde · Sep 11, 2024 · 1a11666 · 1a11666
1 parent 3bb2af2
commit 1a11666
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/portfolio/app/components/posts.tsx b/portfolio/app/components/posts.tsx
@@ -23,10 +23,16 @@ export function BlogPosts(): ReactElement {
             href={`/blog/${post.slug}`}
           >
             <div className="w-full flex flex-col md:flex-row space-x-0 md:space-x-2">
-              <p className="text-neutral-600 dark:text-neutral-400 w-[100px] tabular-nums">
+              <p
+                className="text-neutral-600 dark:text-neutral-400 w-[100px] tabular-nums"
+                style={{ viewTransitionName: `post-date-${post.slug}` }}
+              >
                 {formatDate(post.metadata.publishedAt)}
               </p>
-              <p className="text-neutral-900 dark:text-neutral-100 tracking-tight">
+              <p
+                className="text-neutral-900 dark:text-neutral-100 tracking-tight"
+                style={{ viewTransitionName: `post-title-${post.slug}` }}
+              >
                 {post.metadata.title}
               </p>
             </div>