/
drawer.bottom.tsx
138 lines (128 loc) · 5.05 KB
/
drawer.bottom.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
"use client";
import { Button, Drawer } from "flowbite-react";
import { useState } from "react";
import type { CodeData } from "~/components/code-demo";
const code = `
"use client";
import { Button, Drawer } from "flowbite-react";
import { useState } from "react";
export function Component() {
const [isOpen, setIsOpen] = useState(true);
const handleClose = () => setIsOpen(false);
return (
<>
<div className="flex min-h-[50vh] items-center justify-center">
<Button onClick={() => setIsOpen(true)}>Show bottom drawer</Button>
</div>
<Drawer open={isOpen} onClose={handleClose} position="bottom">
<Drawer.Header title="Drawer" />
<Drawer.Items>
<p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our
<a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
limited-time sale
</a>
for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<a
href="#"
className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
>
Learn more
</a>
<a
href="#"
className="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
>
Get access
<svg
className="ms-2 h-3.5 w-3.5 rtl:rotate-180"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
</a>
</div>
</Drawer.Items>
</Drawer>
</>
);
}
`;
export function Component() {
const [isOpen, setIsOpen] = useState(true);
const handleClose = () => setIsOpen(false);
return (
<>
<div className="flex min-h-[50vh] items-center justify-center">
<Button onClick={() => setIsOpen(true)}>Show bottom drawer</Button>
</div>
<Drawer open={isOpen} onClose={handleClose} position="bottom">
<Drawer.Header title="Drawer" />
<Drawer.Items>
<p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
Supercharge your hiring by taking advantage of our
<a href="#" className="text-cyan-600 underline hover:no-underline dark:text-cyan-500">
limited-time sale
</a>
for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
job board.
</p>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<a
href="#"
className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
>
Learn more
</a>
<a
href="#"
className="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
>
Get access
<svg
className="ms-2 h-3.5 w-3.5 rtl:rotate-180"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
</svg>
</a>
</div>
</Drawer.Items>
</Drawer>
</>
);
}
export const bottom: CodeData = {
type: "single",
code: [
{
fileName: "client",
language: "tsx",
code,
},
],
githubSlug: "drawer/drawer.bottom.tsx",
component: <Component />,
iframe: 600,
};