Skip to content

Commit 7ddef82

Browse files
SutuSebastianSutuSebastian
authored
docs(drawer) - examples cleanup (#1374)
chore: docs(drawer) - examples cleanup
1 parent 92cec6f commit 7ddef82

13 files changed

+245
-1633
lines changed

‎apps/web/examples/drawer/drawer.backdrop.tsx

Lines changed: 30 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
11
"use client";
22

3-
import {
4-
Button,
5-
Drawer,
6-
DrawerHeader,
7-
DrawerItems,
8-
Sidebar,
9-
SidebarItem,
10-
SidebarItemGroup,
11-
SidebarItems,
12-
TextInput,
13-
theme,
14-
} from "flowbite-react";
3+
import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
154
import { useState } from "react";
165
import {
176
HiChartPie,
@@ -24,18 +13,12 @@ import {
2413
HiShoppingBag,
2514
HiUsers,
2615
} from "react-icons/hi";
27-
import { twMerge } from "tailwind-merge";
2816
import type { CodeData } from "~/components/code-demo";
2917

3018
const code = `
3119
"use client";
3220
33-
import {
34-
Button,
35-
Drawer,
36-
Sidebar,
37-
TextInput,
38-
} from "flowbite-react";
21+
import { Button, Drawer, Sidebar, TextInput } from "flowbite-react";
3922
import { useState } from "react";
4023
import {
4124
HiChartPie,
@@ -49,7 +32,7 @@ import {
4932
HiUsers,
5033
} from "react-icons/hi";
5134
52-
function Component() {
35+
export function Component() {
5336
const [isOpen, setIsOpen] = useState(true);
5437
5538
const handleClose = () => setIsOpen(false);
@@ -110,32 +93,8 @@ function Component() {
11093
);
11194
}
11295
`;
113-
const codeRSC = `
114-
import {
115-
Button,
116-
Drawer,
117-
DrawerHeader,
118-
DrawerItems,
119-
Sidebar,
120-
SidebarItem,
121-
SidebarItemGroup,
122-
SidebarItems,
123-
TextInput,
124-
} from "flowbite-react";
125-
import { useState } from "react";
126-
import {
127-
HiChartPie,
128-
HiClipboard,
129-
HiCollection,
130-
HiInformationCircle,
131-
HiLogin,
132-
HiPencil,
133-
HiSearch,
134-
HiShoppingBag,
135-
HiUsers,
136-
} from "react-icons/hi";
13796

138-
function Component() {
97+
export function Component() {
13998
const [isOpen, setIsOpen] = useState(true);
14099

141100
const handleClose = () => setIsOpen(false);
@@ -146,8 +105,8 @@ function Component() {
146105
<Button onClick={() => setIsOpen(true)}>Show navigation</Button>
147106
</div>
148107
<Drawer open={isOpen} onClose={handleClose}>
149-
<DrawerHeader title="MENU" titleIcon={() => <></>} />
150-
<DrawerItems>
108+
<Drawer.Header title="MENU" titleIcon={() => <></>} />
109+
<Drawer.Items>
151110
<Sidebar
152111
aria-label="Sidebar with multi-level dropdown example"
153112
className="[&>div]:bg-transparent [&>div]:p-0"
@@ -157,121 +116,44 @@ function Component() {
157116
<form className="pb-3 md:hidden">
158117
<TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
159118
</form>
160-
<SidebarItems>
161-
<SidebarItemGroup>
162-
<SidebarItem href="/" icon={HiChartPie}>
119+
<Sidebar.Items>
120+
<Sidebar.ItemGroup>
121+
<Sidebar.Item href="/" icon={HiChartPie}>
163122
Dashboard
164-
</SidebarItem>
165-
<SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
123+
</Sidebar.Item>
124+
<Sidebar.Item href="/e-commerce/products" icon={HiShoppingBag}>
166125
Products
167-
</SidebarItem>
168-
<SidebarItem href="/users/list" icon={HiUsers}>
126+
</Sidebar.Item>
127+
<Sidebar.Item href="/users/list" icon={HiUsers}>
169128
Users list
170-
</SidebarItem>
171-
<SidebarItem href="/authentication/sign-in" icon={HiLogin}>
129+
</Sidebar.Item>
130+
<Sidebar.Item href="/authentication/sign-in" icon={HiLogin}>
172131
Sign in
173-
</SidebarItem>
174-
<SidebarItem href="/authentication/sign-up" icon={HiPencil}>
132+
</Sidebar.Item>
133+
<Sidebar.Item href="/authentication/sign-up" icon={HiPencil}>
175134
Sign up
176-
</SidebarItem>
177-
</SidebarItemGroup>
178-
<SidebarItemGroup>
179-
<SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
135+
</Sidebar.Item>
136+
</Sidebar.ItemGroup>
137+
<Sidebar.ItemGroup>
138+
<Sidebar.Item href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
180139
Docs
181-
</SidebarItem>
182-
<SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
140+
</Sidebar.Item>
141+
<Sidebar.Item href="https://flowbite-react.com/" icon={HiCollection}>
183142
Components
184-
</SidebarItem>
185-
<SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
143+
</Sidebar.Item>
144+
<Sidebar.Item href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
186145
Help
187-
</SidebarItem>
188-
</SidebarItemGroup>
189-
</SidebarItems>
146+
</Sidebar.Item>
147+
</Sidebar.ItemGroup>
148+
</Sidebar.Items>
190149
</div>
191150
</div>
192151
</Sidebar>
193-
</DrawerItems>
152+
</Drawer.Items>
194153
</Drawer>
195154
</>
196155
);
197156
}
198-
`;
199-
200-
function Component() {
201-
const [isOpen, setIsOpen] = useState(true);
202-
203-
const handleClose = () => setIsOpen(false);
204-
205-
return (
206-
<div className="relative z-50 -m-5 w-auto overflow-hidden">
207-
<div className="flex min-h-[50vh] items-center justify-center">
208-
<Button onClick={() => setIsOpen(true)}>Show drawer with backdrop</Button>
209-
</div>
210-
<Drawer
211-
open={isOpen}
212-
onClose={handleClose}
213-
theme={{
214-
root: {
215-
base: twMerge(theme.drawer.root.base, "absolute"),
216-
backdrop: twMerge(theme.drawer.root.backdrop, "absolute"),
217-
position: {
218-
left: {
219-
on: twMerge(theme.drawer.root.position.left.on, "h-full"),
220-
off: twMerge(theme.drawer.root.position.left.off, "h-full"),
221-
},
222-
},
223-
},
224-
}}
225-
>
226-
<DrawerHeader title="MENU" titleIcon={() => <></>} />
227-
<DrawerItems>
228-
<Sidebar
229-
aria-label="Sidebar with multi-level dropdown example"
230-
className="[&>div]:bg-transparent [&>div]:p-0"
231-
>
232-
<div className="flex h-full flex-col justify-between py-2">
233-
<div>
234-
<form className="pb-3 md:hidden">
235-
<TextInput icon={HiSearch} type="search" placeholder="Search" required size={32} />
236-
</form>
237-
<SidebarItems>
238-
<SidebarItemGroup>
239-
<SidebarItem href="/" icon={HiChartPie}>
240-
Dashboard
241-
</SidebarItem>
242-
<SidebarItem href="/e-commerce/products" icon={HiShoppingBag}>
243-
Products
244-
</SidebarItem>
245-
<SidebarItem href="/users/list" icon={HiUsers}>
246-
Users list
247-
</SidebarItem>
248-
<SidebarItem href="/authentication/sign-in" icon={HiLogin}>
249-
Sign in
250-
</SidebarItem>
251-
<SidebarItem href="/authentication/sign-up" icon={HiPencil}>
252-
Sign up
253-
</SidebarItem>
254-
</SidebarItemGroup>
255-
<SidebarItemGroup>
256-
<SidebarItem href="https://github.com/themesberg/flowbite-react/" icon={HiClipboard}>
257-
Docs
258-
</SidebarItem>
259-
<SidebarItem href="https://flowbite-react.com/" icon={HiCollection}>
260-
Components
261-
</SidebarItem>
262-
<SidebarItem href="https://github.com/themesberg/flowbite-react/issues" icon={HiInformationCircle}>
263-
Help
264-
</SidebarItem>
265-
</SidebarItemGroup>
266-
</SidebarItems>
267-
</div>
268-
</div>
269-
</Sidebar>
270-
</DrawerItems>
271-
</Drawer>
272-
</div>
273-
);
274-
}
275157

276158
export const backdrop: CodeData = {
277159
type: "single",
@@ -281,12 +163,8 @@ export const backdrop: CodeData = {
281163
language: "tsx",
282164
code,
283165
},
284-
{
285-
fileName: "server",
286-
language: "tsx",
287-
code: codeRSC,
288-
},
289166
],
290167
githubSlug: "drawer/drawer.backdrop.tsx",
291168
component: <Component />,
169+
iframe: 600,
292170
};

0 commit comments

Comments
 (0)