chore: stylistic changes

src/components/BlogCard.astro

@@ -5,6 +5,7 @@ import { Image } from 'astro:assets'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import Link from './Link.astro'
+import { getEntry } from 'astro:content'
 
 type Props = {
   entry: CollectionEntry<'blog'>
@@ -16,10 +17,26 @@ const { entry } = Astro.props as {
 
 const formattedDate = formatDate(entry.data.date)
 const readTime = readingTime(entry.body)
+
+let author = null
+if (
+  entry.data.author &&
+  typeof entry.data.author === 'object' &&
+  'collection' in entry.data.author
+) {
+  author = await getEntry(entry.data.author)
+} else if (typeof entry.data.author === 'string') {
+  author = {
+    data: {
+      name: entry.data.author,
+      avatar: '/favicons/android-chrome-512x512.png',
+    },
+  }
+}
 ---
 
 <div
-  class="not-prose rounded-lg border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
+  class="not-prose rounded-xl border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
 >
   <Link
     href={`/${entry.collection}/${entry.slug}`}
@@ -33,7 +50,7 @@ const readTime = readingTime(entry.body)
             alt={entry.data.title}
             width={200}
             height={200}
-            class="rounded-lg object-cover"
+            class="rounded-xl object-cover"
           />
         </div>
       )
@@ -48,6 +65,21 @@ const readTime = readingTime(entry.body)
       <div
         class="mb-2 flex items-center space-x-2 text-xs text-muted-foreground"
       >
+        {author && (
+          <>
+            <div class="flex items-center gap-1.5">
+              <Image
+                src={author.data.avatar}
+                alt={author.data.name}
+                width={18}
+                height={18}
+                class="rounded-full"
+              />
+              <span>{author.data.name}</span>
+            </div>
+            <Separator orientation="vertical" className="h-4" />
+          </>
+        )}
         <span>{formattedDate}</span>
         <Separator orientation="vertical" className="h-4" />
         <span>{readTime}</span>