Skip to content

Commit

Permalink
feat(docs): drawer docs added
Browse files Browse the repository at this point in the history 
Signed-off-by: The1111mp <The1111mp@outlook.com>
  • Loading branch information
@1111mp
1111mp committed Jan 4, 2024
1 parent 740681a commit d6cc47f
Show file tree
Hide file tree
Showing 16 changed files with 1,132 additions and 65 deletions.
7 changes: 7 additions & 0 deletions apps/docs/config/routes.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,13 @@
"keywords": "divider, boundary, separator, section divider",
"path": "/docs/components/divider.mdx"
},
{
"key": "drawer",
"title": "Drawer",
"keywords": "drawer, dialog box, popup, overlay, content focus",
"path": "/docs/components/drawer.mdx",
"newPost": true
},
{
"key": "dropdown",
"title": "Dropdown",
Expand Down
75 changes: 75 additions & 0 deletions apps/docs/content/components/drawer/backdrop.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react";
export default function App() {
const {isOpen, onOpen, onClose} = useDisclosure();
const [backdrop, setBackdrop] = React.useState('opaque')
const backdrops = ["opaque", "blur", "transparent"];
const handleOpen = (backdrop) => {
setBackdrop(backdrop)
onOpen();
}
return (
<>
<div className="flex flex-wrap gap-3">
{backdrops.map((b) => (
<Button
key={b}
variant="flat"
color="warning"
onPress={() => handleOpen(b)}
className="capitalize"
>
{b}
</Button>
))}
</div>
<Drawer backdrop={backdrop} isOpen={isOpen} onClose={onClose}>
<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,
};
62 changes: 62 additions & 0 deletions apps/docs/content/components/drawer/custom-backdrop.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
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
backdrop="opaque"
isOpen={isOpen}
onOpenChange={onOpenChange}
classNames={{
backdrop: "bg-gradient-to-r from-zinc-900 to-zinc-900/10 backdrop-opacity-20"
}}
>
<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,
};
75 changes: 75 additions & 0 deletions apps/docs/content/components/drawer/custom-motion.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
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
backdrop="opaque"
isOpen={isOpen}
onOpenChange={onOpenChange}
motionProps={{
variants: {
enter: {
opacity: 1,
transition: {
duration: 0.3,
},
},
exit: {
opacity: 0,
transition: {
duration: 0.3,
},
},
}
}}
>
<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,
};
69 changes: 69 additions & 0 deletions apps/docs/content/components/drawer/custom-styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
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} color="secondary">Open Drawer</Button>
<Drawer
backdrop="opaque"
isOpen={isOpen}
onOpenChange={onOpenChange}
radius="lg"
classNames={{
body: "py-6",
backdrop: "bg-[#292f46]/50 backdrop-opacity-40",
base: "w-[378px]",
content: "border-[#292f46] bg-[#19172c] dark:bg-[#19172c] text-[#a8b0d3]",
header: "border-b-[1px] border-[#292f46]",
footer: "border-t-[1px] border-[#292f46]",
closeButton: "hover:bg-white/5 active:bg-white/10",
}}
>
<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="foreground" variant="light" onPress={onClose}>
Close
</Button>
<Button className="bg-[#6f4ef2] shadow-lg shadow-indigo-500/20" onPress={onClose}>
Action
</Button>
</DrawerFooter>
</>
)}
</DrawerContent>
</Drawer>
</>
);
}`;

const react = {
"/App.jsx": App,
};

export default {
...react,
};
Loading

0 comments on commit d6cc47f

Please sign in to comment.