mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
Signed-off-by: The1111mp <The1111mp@outlook.com> Co-authored-by: The1111mp <The1111mp@outlook.com>
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
|
|
|
|
export default function App() {
|
|
const {isOpen, onOpen, onOpenChange} = useDisclosure();
|
|
|
|
return (
|
|
<>
|
|
<Button onPress={onOpen}>Open Drawer</Button>
|
|
<Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
|
|
<DrawerContent>
|
|
{(onClose) => (
|
|
<>
|
|
<DrawerHeader className="flex flex-col gap-1">Drawer Title</DrawerHeader>
|
|
<DrawerBody>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Nullam pulvinar risus non risus hendrerit venenatis.
|
|
Pellentesque sit amet hendrerit risus, sed porttitor quam.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Nullam pulvinar risus non risus hendrerit venenatis.
|
|
Pellentesque sit amet hendrerit risus, sed porttitor quam.
|
|
</p>
|
|
<p>
|
|
Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
|
|
dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis.
|
|
Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
|
|
Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur
|
|
proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
|
|
</p>
|
|
</DrawerBody>
|
|
<DrawerFooter>
|
|
<Button color="danger" variant="light" onPress={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button color="primary" onPress={onClose}>
|
|
Action
|
|
</Button>
|
|
</DrawerFooter>
|
|
</>
|
|
)}
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|