From 8d11f2eefb0ba892cb1d69d397bf7f92395ba683 Mon Sep 17 00:00:00 2001
From: meh <no-reply@pathscale.com>
Date: Wed, 30 Sep 2026 12:19:51 +0700
Subject: [PATCH] refactor(showcases): make the library Card the showcase link

Each showcase card sat inside its own <a>. Card takes href and renders
the anchor itself, so the wrapper goes and the card is the link.
---
 src/pages/Showcases.tsx | 56 +++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/pages/Showcases.tsx b/src/pages/Showcases.tsx
index 36a55f5..c814c2c 100644
--- a/src/pages/Showcases.tsx
+++ b/src/pages/Showcases.tsx
@@ -72,21 +72,19 @@ const Showcases: Component = () => {
         <Grid cols={{ base: "1", sm: "2", md: "3", lg: "4" }} gap="lg">
           <For each={featuredRoutes}>
             {(route) => (
-              <a href={route.path} class="block">
-                <Card material="glass" padding="md" flavor="secondary" isInteractive>
-                  <div>
-                    <h3 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
-                      {route.name}
-                    </h3>
-                    <p class="text-base-content/70 text-sm leading-relaxed mb-4">
-                      {route.description}
-                    </p>
-                    <span class="inline-flex items-center text-primary group-hover:text-primary/80 font-medium text-sm">
-                      View Demo →
-                    </span>
-                  </div>
-                </Card>
-              </a>
+              <Card href={route.path} material="glass" padding="md" flavor="secondary" isInteractive>
+                <div>
+                  <h3 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
+                    {route.name}
+                  </h3>
+                  <p class="text-base-content/70 text-sm leading-relaxed mb-4">
+                    {route.description}
+                  </p>
+                  <span class="inline-flex items-center text-primary group-hover:text-primary/80 font-medium text-sm">
+                    View Demo →
+                  </span>
+                </div>
+              </Card>
             )}
           </For>
         </Grid>
@@ -102,21 +100,19 @@ const Showcases: Component = () => {
         <Grid cols={{ base: "1", sm: "2", md: "3" }} gap="lg">
           <For each={otherRoutes}>
             {(route) => (
-              <a href={route.path} class="block">
-                <Card material="glass" padding="md" flavor="secondary" isInteractive>
-                  <div>
-                    <h3 class="text-lg font-semibold mb-2 group-hover:text-primary transition-colors">
-                      {route.name}
-                    </h3>
-                    <p class="text-base-content/70 text-sm leading-relaxed mb-3">
-                      {route.description}
-                    </p>
-                    <span class="inline-flex items-center text-primary group-hover:text-primary/80 font-medium text-sm">
-                      Explore →
-                    </span>
-                  </div>
-                </Card>
-              </a>
+              <Card href={route.path} material="glass" padding="md" flavor="secondary" isInteractive>
+                <div>
+                  <h3 class="text-lg font-semibold mb-2 group-hover:text-primary transition-colors">
+                    {route.name}
+                  </h3>
+                  <p class="text-base-content/70 text-sm leading-relaxed mb-3">
+                    {route.description}
+                  </p>
+                  <span class="inline-flex items-center text-primary group-hover:text-primary/80 font-medium text-sm">
+                    Explore →
+                  </span>
+                </div>
+              </Card>
             )}
           </For>
         </Grid>