feat : update

components/public/structured-guide.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { ArrowUpRightIcon, ChevronLeftIcon } from "lucide-react";
+import { ViewTransition } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -124,44 +125,66 @@ export function StructuredGuideShell({
           <Link
             href={`/${guide.slug}`}
             className={cn(
-              "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "relative flex min-h-8 shrink-0 items-center whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
               !section
-                ? "bg-muted text-foreground"
+                ? "text-foreground"
                 : "text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
             prefetch
           >
-            <Image
-              src={navigationIconPath("overview")!}
-              alt=""
-              width={20}
-              height={20}
-              className="size-5 object-contain"
-            />
-            Overview
+            {!section ? (
+              <ViewTransition
+                name={`guide-nav-active-${guide.id}`}
+                share="guide-nav-pill"
+                default="none"
+              >
+                <span aria-hidden="true" className="absolute inset-0 rounded-md bg-muted" />
+              </ViewTransition>
+            ) : null}
+            <span className="relative flex items-center gap-2">
+              <Image
+                src={navigationIconPath("overview")!}
+                alt=""
+                width={20}
+                height={20}
+                className="size-5 object-contain"
+              />
+              Overview
+            </span>
           </Link>
           {sections.map((item) => (
             <Link
               key={item.id}
               href={`/${guide.slug}/${item.slug}`}
               className={cn(
-                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "relative flex min-h-8 shrink-0 items-center whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 section === item.slug
-                  ? "bg-muted text-foreground"
+                  ? "text-foreground"
                   : "text-muted-foreground hover:bg-muted hover:text-foreground",
               )}
               prefetch
             >
-              {navigationIconPath(item.slug) ? (
-                <Image
-                  src={navigationIconPath(item.slug)!}
-                  alt=""
-                  width={20}
-                  height={20}
-                  className="size-5 object-contain"
-                />
+              {section === item.slug ? (
+                <ViewTransition
+                  name={`guide-nav-active-${guide.id}`}
+                  share="guide-nav-pill"
+                  default="none"
+                >
+                  <span aria-hidden="true" className="absolute inset-0 rounded-md bg-muted" />
+                </ViewTransition>
               ) : null}
-              {item.title}
+              <span className="relative flex items-center gap-2">
+                {navigationIconPath(item.slug) ? (
+                  <Image
+                    src={navigationIconPath(item.slug)!}
+                    alt=""
+                    width={20}
+                    height={20}
+                    className="size-5 object-contain"
+                  />
+                ) : null}
+                {item.title}
+              </span>
             </Link>
           ))}
         </ScrollableNav>
@@ -1003,7 +1026,13 @@ function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
       </header>
       <div className="grid gap-5 md:grid-cols-2">
         {extra.rows.map((row) => (
-          <Card key={row.id} className="overflow-hidden py-0">
+          <Card
+            key={row.id}
+            className="overflow-hidden py-0"
+            style={row.backgroundColor && row.textColor
+              ? { backgroundColor: row.backgroundColor, color: row.textColor }
+              : undefined}
+          >
             {row.imageUrl ? (
               <div
                 className="relative bg-muted"
@@ -1023,9 +1052,20 @@ function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
               </div>
             ) : null}
             <CardHeader className="pt-5">
-              <CardTitle>{row.heading}</CardTitle>
-              <CardDescription>{row.body}</CardDescription>
-              {row.percent ? <Badge>{metric(row.percent)}</Badge> : null}
+              <CardTitle style={row.textColor ? { color: row.textColor } : undefined}>
+                {row.heading}
+              </CardTitle>
+              <CardDescription
+                className="whitespace-pre-wrap"
+                style={row.textColor ? { color: row.textColor } : undefined}
+              >
+                {row.body}
+              </CardDescription>
+              {row.percent ? (
+                <Badge style={row.textColor ? { color: row.textColor } : undefined}>
+                  {metric(row.percent)}
+                </Badge>
+              ) : null}
             </CardHeader>
           </Card>
         ))}