Unification

src/components/PostComponent.astro

@@ -5,31 +5,38 @@ import {astroI18n} from "astro-i18n";
 import {Image} from "astro:assets";
 import TagComponent from "./TagComponent.astro";
 import P from "./P.astro";
+import Card from "@components/Card.svelte";
 
 interface Props {
     post: CollectionEntry<"announcements">
 }
 
 const { post } = Astro.props as Props;
+
+const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
 ---
 
-<a href={l(`/announcements/${post.slug.split("/").slice(1).join("/")}`)}>
+<Card extraClasses="w-full items-start mx-0" hoverEffect={false}>
     <div class="p-4 flex flex-row">
         {post.data.image != null
             ? (
-                <div class="flex-shrink-0 pr-2">
-                    <Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
-                </div>
+                <a href={postUrl}>
+                    <div class="flex-shrink-0 pr-2">
+                        <Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
+                    </div>
+                </a>
             )
             : null}
         <div>
-            <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
-            <P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
-                day: "numeric",
-                month: "long",
-                year: "numeric",
-            }).format(post.data.created)}</P>
-            <P>{post.data.description}</P>
+            <a href={postUrl} class="flex flex-col items-start">
+                <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
+                <P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
+                    day: "numeric",
+                    month: "long",
+                    year: "numeric",
+                }).format(post.data.created)}</P>
+                <P>{post.data.description}</P>
+            </a>
             <div class="mt-1" transition:name={post.data.title + "-tags"}>
                 {post.data.tags.map((tag) => (
                     <TagComponent tag={tag} />
@@ -37,4 +44,4 @@ const { post } = Astro.props as Props;
             </div>
         </div>
     </div>
-</a>
+</Card>