39 lines
984 B
TypeScript
39 lines
984 B
TypeScript
import type { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
import { Drawer } from './drawer';
|
|
import React, { useState } from 'react';
|
|
import { Button } from '../button';
|
|
|
|
export default {
|
|
title: 'Drawer',
|
|
component: Drawer,
|
|
} as ComponentMeta<typeof Drawer>;
|
|
|
|
const Template: ComponentStory<typeof Drawer> = (args) => {
|
|
const [open, setOpen] = useState(args.open);
|
|
const [container, setContainer] = useState<HTMLElement | null>(null);
|
|
const openButton = <Button onClick={() => setOpen(true)}>Open drawer</Button>;
|
|
return (
|
|
<div ref={setContainer}>
|
|
<Drawer
|
|
{...args}
|
|
open={open}
|
|
onChange={setOpen}
|
|
container={container}
|
|
trigger={openButton}
|
|
>
|
|
{args.children}
|
|
</Drawer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
open: false,
|
|
children: (
|
|
<p className="h-full bg-white dark:bg-black text-black dark:text-white">
|
|
Some content
|
|
</p>
|
|
),
|
|
};
|