From d95fe6a5812e08c512cc29de9735e7aa8b059cfa Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Wed, 15 Oct 2025 20:34:24 +0100
Subject: [PATCH] feat(LinkCard): add 'variant' prop for button-style links and
 improve text contrast

---
 .../layout/main/card/LinkCard.svelte          | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/layout/main/card/LinkCard.svelte b/src/lib/components/layout/main/card/LinkCard.svelte
index 02f6bd8..b93f02c 100644
--- a/src/lib/components/layout/main/card/LinkCard.svelte
+++ b/src/lib/components/layout/main/card/LinkCard.svelte
@@ -8,9 +8,10 @@
     emoji?: string;
     description?: string;
     badges?: { text: string; color?: 'mint' | 'sage' }[];
+    variant?: 'default' | 'button';
   }
 
-  let { url, title, emoji, description, badges }: Props = $props();
+  let { url, title, emoji, description, badges, variant = 'default' }: Props = $props();
 
   function getDomain(url: string): string {
     try {
@@ -28,8 +29,16 @@
   href={url}
   target="_blank"
   rel="noopener noreferrer"
-  class="flex items-center gap-2 rounded-lg bg-canvas-200 p-3 transition-colors hover:bg-canvas-300 dark:bg-canvas-800 dark:hover:bg-canvas-700"
+  class="
+    {variant === 'button'
+      ? 'inline-flex items-center justify-center gap-2 rounded-lg bg-canvas-200 px-4 py-3 font-medium text-ink-900 transition-colors duration-200 hover:bg-canvas-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sage-600 dark:bg-canvas-800 dark:text-ink-50 dark:hover:bg-canvas-700'
+      : 'flex items-center gap-2 rounded-lg bg-canvas-200 p-3 transition-colors hover:bg-canvas-300 dark:bg-canvas-800 dark:hover:bg-canvas-700'}
+  "
 >
+  {#if variant === 'button'}
+    <span class="font-medium">{title}</span>
+    <ExternalLink class="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+  {:else}
   <div class="flex-1">
     <div class="flex items-center gap-2">
       {#if emoji}
@@ -38,15 +47,15 @@
       {#if badges && badges.length > 0}
         {#each badges as badge}
           {#if badge.color === 'mint'}
-            <span class="rounded bg-mint-100 px-2 py-0.5 text-xs text-mint-700 dark:bg-mint-900 dark:text-mint-300">
+            <span class="rounded bg-mint-100 px-2 py-0.5 text-xs font-medium text-mint-800 dark:bg-mint-900 dark:text-mint-200">
               {badge.text}
             </span>
           {:else if badge.color === 'sage'}
-            <span class="rounded bg-sage-100 px-2 py-0.5 text-xs text-sage-700 dark:bg-sage-900 dark:text-sage-300">
+            <span class="rounded bg-sage-100 px-2 py-0.5 text-xs font-medium text-sage-800 dark:bg-sage-900 dark:text-sage-200">
               {badge.text}
             </span>
           {:else}
-            <span class="text-xs font-medium uppercase text-ink-700 dark:text-ink-200">
+            <span class="text-xs font-semibold uppercase text-ink-800 dark:text-ink-100">
               {badge.text}
             </span>
           {/if}
@@ -55,8 +64,9 @@
       <span class="font-medium text-ink-900 dark:text-ink-50">{title}</span>
     </div>
     {#if displayDescription}
-      <p class="mt-1 text-sm text-ink-700 dark:text-ink-200">{displayDescription}</p>
+      <p class="mt-1 text-sm font-medium text-ink-700 dark:text-ink-200">{displayDescription}</p>
     {/if}
   </div>
   <ExternalLink class="h-4 w-4 flex-shrink-0 text-ink-700 dark:text-ink-200" aria-hidden="true" />
+  {/if}
 </a>
\ No newline at end of file
-- 
2.51.2