Skip to content

Commit 0058537

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
code.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent ffa31a1 commit 0058537

1 file changed

Lines changed: 336 additions & 0 deletions

File tree

  • src/sections/Projects/Sistent/components/list

‎src/sections/Projects/Sistent/components/list/code.js‎

Lines changed: 336 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,336 @@
1+
import React, { useState } from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { List, ListItemIcon, ListItemAvatar, ListItemText,ListItem,ListSubheader, ListItemButton, SistentThemeProvider, Divider, Collapse, Checkbox } from "@sistent/sistent";
5+
import { CodeBlock } from "../button/code-block";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import TabButton from "../../../../../reusecore/Button";
8+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
9+
import ExpandLess from "@mui/icons-material/ExpandLess";
10+
import ExpandMore from "@mui/icons-material/ExpandMore";
11+
import StarIcon from "@mui/icons-material/Star";
12+
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
13+
import NotificationsIcon from "@mui/icons-material/Notifications";
14+
import PersonIcon from "@mui/icons-material/Person";
15+
import EngineeringIcon from "@mui/icons-material/Engineering";
16+
17+
const codes = [
18+
// Basic List with List Items
19+
` <List>
20+
<ListItem><ListItemText primary="Layer5 Sistent 1" /></ListItem>
21+
<ListItem><ListItemText primary="Layer5 Sistent 2" /></ListItem>
22+
<ListItem><ListItemText primary="Layer5 Sistent 3" /></ListItem>
23+
</List> `,
24+
// List with Icons in List Items
25+
` <List>
26+
<ListItem><ListItemIcon><StarIcon /></ListItemIcon><ListItemText primary="Layer5 Sistent Starred" /></ListItem>
27+
<ListItem><ListItemIcon><CalendarTodayIcon /></ListItemIcon><ListItemText primary="Layer5 Sistent Calender" /></ListItem>
28+
<ListItem><ListItemIcon><NotificationsIcon /></ListItemIcon><ListItemText primary="Layer5 Sistent Notification" /></ListItem>
29+
</List> `,
30+
// List with Avatars
31+
` <List>
32+
<ListItem><ListItemAvatar><PersonIcon /></ListItemAvatar><ListItemText primary="Layer5 Sistent User 1" /></ListItem>
33+
<ListItem><ListItemAvatar><EngineeringIcon /></ListItemAvatar><ListItemText primary="Layer5 Sistent User 2" /></ListItem>
34+
<ListItem><ListItemAvatar><PersonIcon /></ListItemAvatar><ListItemText primary="Layer5 Sistent User 3" /></ListItem>
35+
</List> `,
36+
// List with Subheader
37+
` <List>
38+
<ListSubheader>Section 1</ListSubheader>
39+
<ListItem><ListItemText primary="Layer5 Sistent A" /></ListItem>
40+
<ListItem><ListItemText primary="Layer5 Sistent B" /></ListItem>
41+
<ListSubheader>Section 2</ListSubheader>
42+
<ListItem><ListItemText primary="Layer5 Sistent C" /></ListItem>
43+
<ListItem><ListItemText primary="Layer5 Sistent D" /></ListItem>
44+
</List> `,
45+
// List with Action Buttons
46+
` <List>
47+
<ListItemButton onClick={() => {}}> Layer5 Sistent Action 1</ListItemButton>
48+
<ListItemButton onClick={() => {}}>Layer5 Sistent Action 2</ListItemButton>
49+
</List> `,
50+
// Nested List Example
51+
` <List sx={{ width: "100%", maxWidth: 360, padding: 2, bgcolor: "background.paper",}} component="nav" >
52+
<ListSubheader component="div" id="nested-list-subheader"> Layer5 Main Section </ListSubheader>
53+
<ListItemButton onClick={toggleOpen1}>
54+
<ListItemText primary="Layer5 Main Item 1" />
55+
{open1 ? <ExpandLess /> : <ExpandMore />}
56+
</ListItemButton>
57+
<Collapse in={open1} timeout="auto" unmountOnExit>
58+
<List component="div" disablePadding sx={{ pl: 4 }}>
59+
<ListItem> <ListItemText primary="Layer5 Sub Item 1.1" /></ListItem>
60+
<ListItem> <ListItemText primary="Layer5 Sub Item 1.2" /></ListItem>
61+
</List>
62+
</Collapse>
63+
64+
<ListItemButton onClick={toggleOpen2}>
65+
<ListItemText primary="Layer5 Main Item 2" />
66+
{open2 ? <ExpandLess /> : <ExpandMore />}
67+
</ListItemButton>
68+
<Collapse in={open2} timeout="auto" unmountOnExit>
69+
<List component="div" disablePadding sx={{ pl: 4 }}>
70+
<ListItem><ListItemText primary="Layer5 Sub Item 2.1" /></ListItem>
71+
<ListItem><ListItemText primary="Layer5 Sub Item 2.2" /></ListItem>
72+
</List>
73+
</Collapse>
74+
</List> `,
75+
// List Control with Checkboxes
76+
` <List sx={{ width: "100%", maxWidth: 360 }}>
77+
{[0, 1, 2, 3].map((value) => {
78+
const labelId = "checkbox-list-label-'$'{value}";
79+
return (
80+
<ListItem key={value} disablePadding>
81+
<ListItemButton onClick={() => handleToggle(value)} dense>
82+
<ListItemIcon>
83+
<Checkbox
84+
edge="start"
85+
checked={checked.includes(value)}
86+
tabIndex={-1}
87+
disableRipple
88+
inputProps={{ "aria-labelledby": labelId }}
89+
/>
90+
</ListItemIcon>
91+
<ListItemText id={labelId} primary={"Layer5 Sistent Item '$'{value + 1}"} />
92+
</ListItemButton>
93+
</ListItem>
94+
);
95+
})}
96+
</List> `,
97+
];
98+
99+
const ListCode = () => {
100+
const location = useLocation();
101+
/* List with Nested Items */
102+
const { isDark } = useStyledDarkMode();
103+
const [open1, setOpen1] = useState(false);
104+
const [open2, setOpen2] = useState(false);
105+
const toggleOpen1 = () => setOpen1((prev) => !prev);
106+
const toggleOpen2 = () => setOpen2((prev) => !prev);
107+
108+
/* ListControl with Checkboxes */
109+
const [checked, setChecked] = React.useState([]);
110+
const handleToggle = (value) => {
111+
setChecked((prevChecked) =>
112+
prevChecked.includes(value)
113+
? prevChecked.filter((item) => item !== value) // Remove if already checked
114+
: [...prevChecked, value] // Add if not checked
115+
);
116+
};
117+
return (
118+
<SistentLayout title="List">
119+
<div className="content">
120+
<a id="Identity"><h2>List</h2></a>
121+
<p>
122+
The List component displays a list of items in a structured and
123+
accessible manner. Variants include simple lists, lists with icons,
124+
lists with avatars, and lists with action buttons.
125+
</p>
126+
127+
<div className="filterBtns">
128+
<TabButton
129+
className={location.pathname === "/projects/sistent/components/list" ? "active" : ""}
130+
onClick={() => navigate("/projects/sistent/components/list")}
131+
title="Overview"
132+
/>
133+
<TabButton
134+
className={location.pathname === "/projects/sistent/components/list/guidance" ? "active" : ""}
135+
onClick={() => navigate("/projects/sistent/components/list/guidance")}
136+
title="Guidance"
137+
/>
138+
<TabButton
139+
className={location.pathname === "/projects/sistent/components/list/code" ? "active" : ""}
140+
onClick={() => navigate("/projects/sistent/components/list/code")}
141+
title="Code"
142+
/>
143+
</div>
144+
<div className="main-content">
145+
{/* Simple List */}
146+
<a id="Simple List"><h3>Simple List</h3></a>
147+
<p>This is a basic list with plain text items.</p>
148+
<div className="showcase">
149+
<div className="items">
150+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
151+
<List>
152+
<ListItem><ListItemText primary="Layer5 Sistent Item 1" /></ListItem>
153+
<ListItem><ListItemText primary="Layer5 Sistent Item 2" /></ListItem>
154+
<ListItem><ListItemText primary="Layer5 Sistent Item 3" /></ListItem>
155+
</List>
156+
</SistentThemeProvider>
157+
</div>
158+
<CodeBlock name="simple-list" code={codes[0]} />
159+
</div>
160+
161+
{/* List with Icons */}
162+
<a id="List With Icons"><h3>List with Icons</h3></a>
163+
<p>List items can be paired with icons to add visual cues.</p>
164+
<div className="showcase">
165+
<div className="items">
166+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
167+
<List>
168+
<ListItem>
169+
<ListItemIcon><StarIcon /></ListItemIcon>
170+
<ListItemText primary="Layer5 Sistent Starred" />
171+
</ListItem>
172+
<ListItem>
173+
<ListItemIcon><CalendarTodayIcon /></ListItemIcon>
174+
<ListItemText primary="Layer5 Sistent Calendar" />
175+
</ListItem>
176+
<ListItem>
177+
<ListItemIcon><NotificationsIcon /></ListItemIcon>
178+
<ListItemText primary="Layer5 Sistent Notification" />
179+
</ListItem>
180+
</List>
181+
</SistentThemeProvider>
182+
</div>
183+
<CodeBlock name="icon-list" code={codes[1]} />
184+
</div>
185+
186+
{/* List with Avatars */}
187+
<a id="List With Avatars"><h3>List with Avatars</h3></a>
188+
<p>Use avatars for list items representing people or entities.</p>
189+
<div className="showcase">
190+
<div className="items">
191+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
192+
<List>
193+
<ListItem><ListItemAvatar><PersonIcon /></ListItemAvatar><ListItemText primary="Layer5 Sistent User 1" /></ListItem>
194+
<ListItem><ListItemAvatar><EngineeringIcon /></ListItemAvatar><ListItemText primary="Layer5 Sistent User 2" /></ListItem>
195+
<ListItem><ListItemAvatar><EngineeringIcon /></ListItemAvatar><ListItemText primary="Layer5 Sistent User 3" /></ListItem>
196+
</List>
197+
</SistentThemeProvider>
198+
</div>
199+
<CodeBlock name="avatar-list" code={codes[2]} />
200+
</div>
201+
202+
{/* List with Subheader */}
203+
<a id="List With Subheader"><h3>List with Subheader</h3></a>
204+
<p>Organize list items under different subheaders for better grouping.</p>
205+
<div className="showcase">
206+
<div className="items">
207+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
208+
<List>
209+
<ListSubheader>Section 1</ListSubheader>
210+
<ListItem>
211+
<ListItemText primary="Layer5 Sistent Item A" />
212+
</ListItem>
213+
<ListItem>
214+
<ListItemText primary="Layer5 Sistent Item B" />
215+
</ListItem>
216+
<Divider />
217+
<ListSubheader>Section 2</ListSubheader>
218+
<ListItem>
219+
<ListItemText primary="Layer5 Sistent Item C" />
220+
</ListItem>
221+
<ListItem>
222+
<ListItemText primary="Layer5 Sistent Item D" />
223+
</ListItem>
224+
</List>
225+
</SistentThemeProvider>
226+
</div>
227+
<CodeBlock name="subheader-list" code={codes[3]} />
228+
</div>
229+
230+
{/* List with Action Buttons */}
231+
<a id="List With ActionButtons"><h3>List with Action Buttons</h3></a>
232+
<p>Lists can also have action buttons for added interactivity.</p>
233+
<div className="showcase">
234+
<div className="items">
235+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
236+
<List>
237+
<ListItemButton onClick={() => {}}> Layer5 Sistent Action Item 1</ListItemButton>
238+
<ListItemButton onClick={() => {}}>Layer5 Sistent Action Item 2</ListItemButton>
239+
</List>
240+
</SistentThemeProvider>
241+
</div>
242+
<CodeBlock name="button-list" code={codes[4]} />
243+
</div>
244+
245+
{/* List with Nested Items */}
246+
<a id="Nested List"><h3>List with Nested Items</h3></a>
247+
<p>Lists can also be nested to represent hierarchical structures.</p>
248+
<div className="showcase">
249+
<div className="items">
250+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
251+
<List
252+
sx={{
253+
width: "100%",
254+
maxWidth: 360,
255+
padding: 2,
256+
bgcolor: "background.paper",
257+
}}
258+
component="nav"
259+
>
260+
<ListSubheader component="div" id="nested-list-subheader">
261+
Layer5 Main Section
262+
</ListSubheader>
263+
264+
{/* Main Item 1 with Nested Items */}
265+
<ListItemButton onClick={toggleOpen1}>
266+
<ListItemText primary="Layer5 Main Item 1" />
267+
{open1 ? <ExpandLess /> : <ExpandMore />}
268+
</ListItemButton>
269+
<Collapse in={open1} timeout="auto" unmountOnExit>
270+
<List component="div" disablePadding sx={{ pl: 4 }}>
271+
<ListItem>
272+
<ListItemText primary="Layer5 Sub Item 1.1" />
273+
</ListItem>
274+
<ListItem>
275+
<ListItemText primary="Layer5 Sub Item 1.2" />
276+
</ListItem>
277+
</List>
278+
</Collapse>
279+
280+
{/* Main Item 2 with Nested Items */}
281+
<ListItemButton onClick={toggleOpen2}>
282+
<ListItemText primary="Layer5 Main Item 2" />
283+
{open2 ? <ExpandLess /> : <ExpandMore />}
284+
</ListItemButton>
285+
<Collapse in={open2} timeout="auto" unmountOnExit>
286+
<List component="div" disablePadding sx={{ pl: 4 }}>
287+
<ListItem>
288+
<ListItemText primary="Layer5 Sub Item 2.1" />
289+
</ListItem>
290+
<ListItem>
291+
<ListItemText primary="Layer5 Sub Item 2.2" />
292+
</ListItem>
293+
</List>
294+
</Collapse>
295+
</List>
296+
</SistentThemeProvider>
297+
</div>
298+
<CodeBlock name="nested-list" code={codes[5]} />
299+
</div>
300+
301+
{/* ListControl with Checkboxes */}
302+
<a id="List Control With Checkboxes"><h3>List Control with Checkboxes</h3></a>
303+
<p>Add checkboxes to list items for selection. A checkbox can either be a primary action or a secondary action.</p>
304+
<div className="showcase">
305+
<div className="items">
306+
<List sx={{ width: "100%", maxWidth: 360 }}>
307+
{[0, 1, 2, 3].map((value) => {
308+
const labelId = `checkbox-list-label-${value}`;
309+
310+
return (
311+
<ListItem key={value} disablePadding>
312+
<ListItemButton onClick={() => handleToggle(value)} dense>
313+
<ListItemIcon>
314+
<Checkbox
315+
edge="start"
316+
checked={checked.includes(value)}
317+
tabIndex={-1}
318+
disableRipple
319+
inputProps={{ "aria-labelledby": labelId }}
320+
/>
321+
</ListItemIcon>
322+
<ListItemText id={labelId} primary={`Layer5 Sistent Item ${value + 1}`} />
323+
</ListItemButton>
324+
</ListItem>
325+
);
326+
})}
327+
</List>
328+
</div>
329+
<CodeBlock name="checkbox-list" code={codes[6]} />
330+
</div>
331+
</div>
332+
</div>
333+
</SistentLayout>
334+
);
335+
};
336+
export default ListCode;

0 commit comments

Comments
 (0)