1  import type { Meta, StoryObj } from '@storybook/react-vite'
 2  
 3  import { Dialog } from './dialog'
 4  import { Button } from './button'
 5  
 6  const meta = {
 7    title: 'Form/Dialog',
 8    component: Dialog,
 9    parameters: {
10      layout: 'centered',
11    },
12    tags: ['autodocs'],
13  } satisfies Meta<typeof Dialog>
14  
15  export default meta
16  type Story = StoryObj<typeof meta>
17  
18  export const Default: Story = {
19    args: {
20      title: 'User Profile',
21      children: (
22        <div className="space-y-4">
23          <p className="text-gray-700 dark:text-gray-300">
24            This is a simple dialog component with a title and content area.
25          </p>
26        </div>
27      ),
28    },
29  }
30  
31  export const WithFooter: Story = {
32    args: {
33      title: 'Confirm Action',
34      children: (
35        <div className="space-y-4">
36          <p className="text-gray-700 dark:text-gray-300">
37            Are you sure you want to proceed with this action?
38          </p>
39        </div>
40      ),
41      footer: (
42        <div className="flex gap-3 justify-end">
43          <Button variant="secondary" size="medium">
44            Cancel
45          </Button>
46          <Button variant="primary" size="medium">
47            Confirm
48          </Button>
49        </div>
50      ),
51    },
52  }
53  
54  export const Form: Story = {
55    args: {
56      title: 'Create Account',
57      children: (
58        <div className="space-y-4 min-w-80">
59          <div className="flex flex-col gap-2">
60            <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
61              Email
62            </label>
63            <input
64              type="email"
65              placeholder="you@example.com"
66              className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
67            />
68          </div>
69          <div className="flex flex-col gap-2">
70            <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
71              Password
72            </label>
73            <input
74              type="password"
75              placeholder="••••••••"
76              className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
77            />
78          </div>
79        </div>
80      ),
81      footer: (
82        <div className="flex gap-3 justify-end">
83          <Button variant="secondary" size="medium">
84            Cancel
85          </Button>
86          <Button variant="primary" size="medium">
87            Create Account
88          </Button>
89        </div>
90      ),
91    },
92  }