veza/apps/web/src/components/layout/DashboardLayout.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { DashboardLayout } from './DashboardLayout';

const meta = {
    title: 'App/Layouts/DashboardLayout',
    component: DashboardLayout,
    tags: ['autodocs'],
    parameters: {
        layout: 'fullscreen',
    },
} satisfies Meta<typeof DashboardLayout>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    args: {
        children: (
            <div className="space-y-4">
                <h1 className="text-3xl font-bold text-white">Dashboard Content</h1>
                <p className="text-gray-400">This is the main content area rendered within the layout.</p>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 1</div>
                    <div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 2</div>
                    <div className="h-32 bg-white/5 rounded-xl border border-white/10 p-4">Card 3</div>
                </div>
                {/* Long content to test scrolling */}
                {Array.from({ length: 20 }).map((_, i) => (
                    <div key={i} className="h-16 bg-white/5 rounded-lg border border-white/5 flex items-center px-4">
                        Item {i + 1}
                    </div>
                ))}
            </div>
        ),
    },
};