feat: add view transitions for card on search page (#118)

* feat: use predictable slug for card transition

* feat: enable view transitions in search card

* refactor: use Card.tsx instead of Card.astro

* refactor: handle card styling in component

* refactor: remove unused class name

---------

Co-authored-by: Sat Naing <satnaingdev@gmail.com>

src/layouts/PostDetails.astro

@@ -43,7 +43,7 @@ const ogUrl = new URL(ogImage ? ogImage : `${post.slug}.png`, Astro.url.origin)
     </button>
   </div>
   <main id="main-content">
-    <h1 transition:name={title} class="post-title">{title}</h1>
+    <h1 transition:name={slugifyStr(title)} class="post-title">{title}</h1>
     <Datetime datetime={pubDatetime} size="lg" className="my-2" />
     <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
       <Content />

src/layouts/Posts.astro

@@ -4,7 +4,7 @@ import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-import Card from "@components/Card.astro";
+import Card from "@components/Card";
 import LinkButton from "@components/LinkButton.astro";
 import slugify from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";