feat(Link): create reusable Link ui component

2026-04-23 13:05:22 +03:00
parent 4eafb96d35
commit 877719f106
3 changed files with 228 additions and 0 deletions
@@ -0,0 +1,96 @@
+<script module lang="ts">
+import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right';
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import type { ComponentProps } from 'svelte';
+import Link from './Link.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Link',
+    component: Link,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Styled link component based on the footer link design. Supports optional icon snippet and standard anchor attributes.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        href: {
+            control: 'text',
+            description: 'Link URL',
+        },
+    },
+});
+</script>
+
+<Story
+    name="Default"
+    args={{
+        href: 'https://fonts.google.com',
+        target: '_blank',
+    }}
+>
+    {#snippet template(args: ComponentProps<typeof Link>)}
+        <Link {...args}>
+            <span>Google Fonts</span>
+        </Link>
+    {/snippet}
+</Story>
+
+<Story
+    name="With Icon"
+    args={{
+        href: 'https://fonts.google.com',
+        target: '_blank',
+    }}
+>
+    {#snippet template(args: ComponentProps<typeof Link>)}
+        <Link {...args}>
+            <span>Google Fonts</span>
+            {#snippet icon()}
+                <ArrowUpRightIcon
+                    size={10}
+                    class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
+                />
+            {/snippet}
+        </Link>
+    {/snippet}
+</Story>
+
+<Story name="Multiple Links">
+    {#snippet template()}
+        <div class="flex gap-4 p-8 bg-neutral-100 dark:bg-neutral-900 rounded-lg">
+            <Link href="https://fonts.google.com" target="_blank">
+                <span>Google Fonts</span>
+                {#snippet icon()}
+                    <ArrowUpRightIcon
+                        size={10}
+                        class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
+                    />
+                {/snippet}
+            </Link>
+            <Link href="https://www.fontshare.com" target="_blank">
+                <span>Fontshare</span>
+                {#snippet icon()}
+                    <ArrowUpRightIcon
+                        size={10}
+                        class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
+                    />
+                {/snippet}
+            </Link>
+            <Link href="https://github.com" target="_blank">
+                <span>GitHub</span>
+                {#snippet icon()}
+                    <ArrowUpRightIcon
+                        size={10}
+                        class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
+                    />
+                {/snippet}
+            </Link>
+        </div>
+    {/snippet}
+</Story>