feat: breadcrumbs and more

src/pages/authors/[...slug].astro

@@ -5,6 +5,15 @@ import Container from '@components/Container.astro'
 import AuthorCard from '@components/AuthorCard.astro'
 import BlogCard from '@components/BlogCard.astro'
 import { Button } from '@/components/ui/button'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { HomeIcon } from 'lucide-react'
 
 export async function getStaticPaths() {
   const authors = await getCollection('authors')
@@ -38,9 +47,24 @@ const authorPosts = allPosts
   description={author.data.bio || `Profile of ${author.data.name}`}
 >
   <Container>
-    <a href="/authors">
-      <Button variant="ghost" className="mb-8">&larr; Back to authors</Button>
-    </a>
+    <Breadcrumb className="mb-4">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/"
+            ><HomeIcon className="h-4 w-4" /></BreadcrumbLink
+          >
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/authors">Authors</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>{author.data.name}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+
     <div class="space-y-10">
       <section>
         <AuthorCard author={author} />