Ilia Mashkov
54 lines
1.4 KiB
Svelte
54 lines
1.4 KiB
Svelte
<script module lang="ts">
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import type { ComponentProps } from 'svelte';
|
|
import FooterLink from './FooterLink.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/FooterLink',
|
|
component: FooterLink,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: 'Standard footer link with arrow icon and hover effects.',
|
|
},
|
|
story: { inline: false },
|
|
},
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
text: {
|
|
control: 'text',
|
|
description: 'Link text',
|
|
},
|
|
href: {
|
|
control: 'text',
|
|
description: 'Link URL',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
text: 'Google Fonts',
|
|
href: 'https://fonts.google.com',
|
|
target: '_blank',
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof FooterLink>)}
|
|
<FooterLink {...args} />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="Multiple Links">
|
|
{#snippet template()}
|
|
<div class="flex gap-4 p-8 bg-neutral-100 dark:bg-neutral-900 rounded-lg">
|
|
<FooterLink text="Google Fonts" href="https://fonts.google.com" target="_blank" />
|
|
<FooterLink text="Fontshare" href="https://www.fontshare.com" target="_blank" />
|
|
<FooterLink text="GitHub" href="https://github.com" target="_blank" />
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|