frontend-svelte/src/widgets/Footer/ui/Footer/Footer.stories.svelte

<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';
import Footer from './Footer.svelte';

const { Story } = defineMeta({
    title: 'Widgets/Footer',
    component: Footer,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Application footer with project information and portfolio link. Visible only on desktop screens.',
            },
            story: { inline: false },
        },
        layout: 'fullscreen',
    },
});
</script>

<Story
    name="Desktop View"
    parameters={{
        viewport: { defaultViewport: 'desktop' },
    }}
>
    {#snippet template()}
        <div class="h-[200px] relative bg-neutral-50 dark:bg-neutral-900">
            <Footer />
        </div>
    {/snippet}
</Story>

<Story
    name="Mobile View (Hidden)"
    parameters={{
        viewport: { defaultViewport: 'mobile1' },
    }}
>
    {#snippet template()}
        <div class="h-[200px] relative bg-neutral-50 dark:bg-neutral-900">
            <p class="p-4 text-sm text-neutral-500 italic">Footer should be hidden on mobile.</p>
            <Footer />
        </div>
    {/snippet}
</Story>