Skip to content

Commit

Permalink
docs(drawer) - examples cleanup (#1374)
Browse files Browse the repository at this point in the history 
chore: docs(drawer) - examples cleanup
  • Loading branch information
@SutuSebastian
SutuSebastian authored Apr 17, 2024
1 parent 92cec6f commit 7ddef82
Show file tree
Hide file tree
Showing 13 changed files with 245 additions and 1,633 deletions.
182 changes: 30 additions & 152 deletions apps/web/examples/drawer/drawer.backdrop.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
"use client";

import {
Button,
Drawer,
DrawerHeader,
DrawerItems,
Sidebar,
SidebarItem,
SidebarItemGroup,
SidebarItems,
TextInput,
theme,
} from "flowbite-react";
import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
import { useState } from "react";
import {
HiChartPie,
Expand All @@ -24,18 +13,12 @@ import {
HiShoppingBag,
HiUsers,
} from "react-icons/hi";
import { twMerge } from "tailwind-merge";
import type { CodeData } from "~/components/code-demo";

const code = `
"use client";
import {
Button,
Drawer,
Sidebar,
TextInput,
} from "flowbite-react";
import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
import { useState } from "react";
import {
HiChartPie,
Expand All @@ -49,7 +32,7 @@ import {
HiUsers,
} from "react-icons/hi";
function Component() {
export function Component() {
const [isOpen, setIsOpen] = useState(true);
const handleClose = () => setIsOpen(false);
Expand Down Expand Up @@ -110,32 +93,8 @@ function Component() {
);
}
`;
const codeRSC = `
import {
Button,
Drawer,
DrawerHeader,
DrawerItems,
Sidebar,
SidebarItem,
SidebarItemGroup,
SidebarItems,
TextInput,
} from "flowbite-react";
import { useState } from "react";
import {
HiChartPie,
HiClipboard,
HiCollection,
HiInformationCircle,
HiLogin,
HiPencil,
HiSearch,
HiShoppingBag,
HiUsers,
} from "react-icons/hi";

function Component() {
export function Component() {
const [isOpen, setIsOpen] = useState(true);

const handleClose = () => setIsOpen(false);
Expand All @@ -146,8 +105,8 @@ function Component() {
<Button onClick={() => setIsOpen(true)}>Show navigation</Button>
</div>
<Drawer open={isOpen} onClose={handleClose}>
<DrawerHeader title="MENU" titleIcon={() => <></>} />
<DrawerItems>
<Drawer.Header title="MENU" titleIcon={() => <></>} />
<Drawer.Items>
<Sidebar
aria-label="Sidebar with multi-level dropdown example"
className="[&>div]:bg-transparent [&>div]:p-0"
Expand All @@ -157,121 +116,44 @@ function Component() {
<form className="pb-3 md:hidden">
<TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
</form>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem href="/" icon={HiChartPie}>
<Sidebar.Items>
<Sidebar.ItemGroup>
<Sidebar.Item href="/" icon={HiChartPie}>
Dashboard
</SidebarItem>
<SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
</Sidebar.Item>
<Sidebar.Item href="/e-commerce/products" icon={HiShoppingBag}>
Products
</SidebarItem>
<SidebarItem href="/users/list" icon={HiUsers}>
</Sidebar.Item>
<Sidebar.Item href="/users/list" icon={HiUsers}>
Users list
</SidebarItem>
<SidebarItem href="/authentication/sign-in" icon={HiLogin}>
</Sidebar.Item>
<Sidebar.Item href="/authentication/sign-in" icon={HiLogin}>
Sign in
</SidebarItem>
<SidebarItem href="/authentication/sign-up" icon={HiPencil}>
</Sidebar.Item>
<Sidebar.Item href="/authentication/sign-up" icon={HiPencil}>
Sign up
</SidebarItem>
</SidebarItemGroup>
<SidebarItemGroup>
<SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
</Sidebar.Item>
</Sidebar.ItemGroup>
<Sidebar.ItemGroup>
<Sidebar.Item href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
Docs
</SidebarItem>
<SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
</Sidebar.Item>
<Sidebar.Item href="https://flowbite-react.com/" icon={HiCollection}>
Components
</SidebarItem>
<SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
</Sidebar.Item>
<Sidebar.Item href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
Help
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</Sidebar.Item>
</Sidebar.ItemGroup>
</Sidebar.Items>
</div>
</div>
</Sidebar>
</DrawerItems>
</Drawer.Items>
</Drawer>
</>
);
}
`;

function Component() {
const [isOpen, setIsOpen] = useState(true);

const handleClose = () => setIsOpen(false);

return (
<div className="relative z-50 -m-5 w-auto overflow-hidden">
<div className="flex min-h-[50vh] items-center justify-center">
<Button onClick={() => setIsOpen(true)}>Show drawer with backdrop</Button>
</div>
<Drawer
open={isOpen}
onClose={handleClose}
theme={{
root: {
base: twMerge(theme.drawer.root.base, "absolute"),
backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
position: {
left: {
on: twMerge(theme.drawer.root.position.left.on, "h-full"),
off: twMerge(theme.drawer.root.position.left.off, "h-full"),
},
},
},
}}
>
<DrawerHeader title="MENU" titleIcon={() => <></>} />
<DrawerItems>
<Sidebar
aria-label="Sidebar with multi-level dropdown example"
className="[&>div]:bg-transparent [&>div]:p-0"
>
<div className="flex h-full flex-col justify-between py-2">
<div>
<form className="pb-3 md:hidden">
<TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
</form>
<SidebarItems>
<SidebarItemGroup>
<SidebarItem href="/" icon={HiChartPie}>
Dashboard
</SidebarItem>
<SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
Products
</SidebarItem>
<SidebarItem href="/users/list" icon={HiUsers}>
Users list
</SidebarItem>
<SidebarItem href="/authentication/sign-in" icon={HiLogin}>
Sign in
</SidebarItem>
<SidebarItem href="/authentication/sign-up" icon={HiPencil}>
Sign up
</SidebarItem>
</SidebarItemGroup>
<SidebarItemGroup>
<SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
Docs
</SidebarItem>
<SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
Components
</SidebarItem>
<SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
Help
</SidebarItem>
</SidebarItemGroup>
</SidebarItems>
</div>
</div>
</Sidebar>
</DrawerItems>
</Drawer>
</div>
);
}

export const backdrop: CodeData = {
type: "single",
Expand All @@ -281,12 +163,8 @@ export const backdrop: CodeData = {
language: "tsx",
code,
},
{
fileName: "server",
language: "tsx",
code: codeRSC,
},
],
githubSlug: "drawer/drawer.backdrop.tsx",
component: <Component />,
iframe: 600,
};
Loading

0 comments on commit 7ddef82

Please sign in to comment.