Skip to content

Commit 45930ef

Browse files
pagharpaghar
authored
feat(web) add new example of advanced list component (#1337)
* feat(web) add new example of advanced list component * format(web) fix doc typo issues * format(web) fix doc typo issues
1 parent cccda3e commit 45930ef

File tree

3 files changed

+208
-0
lines changed

3 files changed

+208
-0
lines changed

‎apps/web/content/docs/typography/list.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ Use the `ordered` prop tag to create an ordered list of items with numbers.
4141

4242
<Example name="list.ordered" />
4343

44+
## Advanced layout
45+
46+
This example can be used to show more details for each list item such as the user’s name, email and profile picture.
47+
48+
<Example name="list.advanced" />
49+
4450
## Horizontal list
4551

4652
Use this example to create a horizontally aligned list of items.

‎apps/web/examples/list/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export { advanced } from "./list.advanced";
12
export { horizontal } from "./list.horizontal";
23
export { icon } from "./list.icon";
34
export { nested } from "./list.nested";

‎apps/web/examples/list/list.advanced.tsx

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import { Avatar, List, ListItem } from "flowbite-react";
2+
import { type CodeData } from "~/components/code-demo";
3+
4+
const code = `
5+
"use client";
6+
7+
import { List, Avatar } from "flowbite-react";
8+
9+
function Component() {
10+
return (
11+
<List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
12+
<ListItem className="pb-3 sm:pb-4">
13+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
14+
<Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
15+
<div className="min-w-0 flex-1">
16+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
17+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
18+
</div>
19+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
20+
</div>
21+
</ListItem>
22+
<ListItem className="py-3 sm:py-4">
23+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
24+
<Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
25+
<div className="min-w-0 flex-1">
26+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
27+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
28+
</div>
29+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
30+
</div>
31+
</ListItem>
32+
<ListItem className="py-3 sm:py-4">
33+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
34+
<Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
35+
<div className="min-w-0 flex-1">
36+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
37+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
38+
</div>
39+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
40+
</div>
41+
</ListItem>
42+
<ListItem className="py-3 sm:py-4">
43+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
44+
<Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
45+
<div className="min-w-0 flex-1">
46+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
47+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
48+
</div>
49+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
50+
</div>
51+
</ListItem>
52+
<ListItem className="pb-0 pt-3 sm:pt-4">
53+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
54+
<Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
55+
<div className="min-w-0 flex-1">
56+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
57+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
58+
</div>
59+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
60+
</div>
61+
</ListItem>
62+
</List>
63+
);
64+
}
65+
`;
66+
67+
const codeRSC = `
68+
import { Avatar, List, ListItem } from "flowbite-react";
69+
70+
function Component() {
71+
return (
72+
<List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
73+
<ListItem className="pb-3 sm:pb-4">
74+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
75+
<Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
76+
<div className="min-w-0 flex-1">
77+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
78+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
79+
</div>
80+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
81+
</div>
82+
</ListItem>
83+
<ListItem className="py-3 sm:py-4">
84+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
85+
<Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
86+
<div className="min-w-0 flex-1">
87+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
88+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
89+
</div>
90+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
91+
</div>
92+
</ListItem>
93+
<ListItem className="py-3 sm:py-4">
94+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
95+
<Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
96+
<div className="min-w-0 flex-1">
97+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
98+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
99+
</div>
100+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
101+
</div>
102+
</ListItem>
103+
<ListItem className="py-3 sm:py-4">
104+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
105+
<Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
106+
<div className="min-w-0 flex-1">
107+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
108+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
109+
</div>
110+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
111+
</div>
112+
</ListItem>
113+
<ListItem className="pb-0 pt-3 sm:pt-4">
114+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
115+
<Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
116+
<div className="min-w-0 flex-1">
117+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
118+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
119+
</div>
120+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
121+
</div>
122+
</ListItem>
123+
</List>
124+
);
125+
}
126+
`;
127+
128+
function Component() {
129+
return (
130+
<List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
131+
<ListItem className="pb-3 sm:pb-4">
132+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
133+
<Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
134+
<div className="min-w-0 flex-1">
135+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
136+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
137+
</div>
138+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
139+
</div>
140+
</ListItem>
141+
<ListItem className="py-3 sm:py-4">
142+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
143+
<Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
144+
<div className="min-w-0 flex-1">
145+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
146+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
147+
</div>
148+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
149+
</div>
150+
</ListItem>
151+
<ListItem className="py-3 sm:py-4">
152+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
153+
<Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
154+
<div className="min-w-0 flex-1">
155+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
156+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
157+
</div>
158+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
159+
</div>
160+
</ListItem>
161+
<ListItem className="py-3 sm:py-4">
162+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
163+
<Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
164+
<div className="min-w-0 flex-1">
165+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
166+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
167+
</div>
168+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
169+
</div>
170+
</ListItem>
171+
<ListItem className="pb-0 pt-3 sm:pt-4">
172+
<div className="flex items-center space-x-4 rtl:space-x-reverse">
173+
<Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
174+
<div className="min-w-0 flex-1">
175+
<p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
176+
<p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
177+
</div>
178+
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
179+
</div>
180+
</ListItem>
181+
</List>
182+
);
183+
}
184+
185+
export const advanced: CodeData = {
186+
type: "single",
187+
code: [
188+
{
189+
fileName: "client",
190+
language: "tsx",
191+
code,
192+
},
193+
{
194+
fileName: "server",
195+
language: "tsx",
196+
code: codeRSC,
197+
},
198+
],
199+
githubSlug: "list/list.advanced.tsx",
200+
component: <Component />,
201+
};

0 commit comments

Comments
 (0)