Skip to content

Commit b884209

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
Index.js
Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>
1 parent ed2195f commit b884209

1 file changed

Lines changed: 217 additions & 0 deletions

File tree

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

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

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { SistentThemeProvider, List, ListItem, ListItemText, ListSubheader,ListItemButton, ListItemIcon, ListItemAvatar, Divider } from "@sistent/sistent";
5+
import TabButton from "../../../../../reusecore/Button";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import { Row } from "../../../../../reusecore/Layout";
8+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
9+
import StarIcon from "@mui/icons-material/Star";
10+
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
11+
import NotificationsIcon from "@mui/icons-material/Notifications";
12+
import CheckIcon from "@mui/icons-material/Check";
13+
import CloseIcon from "@mui/icons-material/Close";
14+
import PersonIcon from "@mui/icons-material/Person";
15+
import EngineeringIcon from "@mui/icons-material/Engineering";
16+
17+
const SistentList = () => {
18+
const location = useLocation();
19+
const { isDark } = useStyledDarkMode();
20+
21+
return (
22+
<SistentLayout title="List">
23+
<div className="content">
24+
<a id="Identity">
25+
<h2>List</h2>
26+
</a>
27+
<p>
28+
Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.
29+
</p>
30+
<div className="filterBtns">
31+
<TabButton
32+
className={location.pathname === "/projects/sistent/components/list" ? "active" : ""}
33+
onClick={() => navigate("/projects/sistent/components/list")}
34+
title="Overview"
35+
/>
36+
<TabButton
37+
className={location.pathname === "/projects/sistent/components/list/guidance" ? "active" : ""}
38+
onClick={() => navigate("/projects/sistent/components/list/guidance")}
39+
title="Guidance"
40+
/>
41+
<TabButton
42+
className={location.pathname === "/projects/sistent/components/list/code" ? "active" : ""}
43+
onClick={() => navigate("/projects/sistent/components/list/code")}
44+
title="Code"
45+
/>
46+
</div>
47+
<div className="main-content">
48+
<p>The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.</p>
49+
<p>
50+
The List component is designed to:
51+
</p>
52+
<ul>
53+
<li><strong>Organize Content:</strong> Provides a structured vertical layout for related items.</li>
54+
<li><strong>Interactive Elements:</strong> Add actionable buttons and components to enhance user interaction.</li>
55+
<li><strong>Customizable Design:</strong> Offers size variations, dense modes, and alignment options.</li>
56+
<li><strong>Accessibility:</strong> Ensures keyboard navigation and visual feedback for enhanced usability.</li>
57+
</ul>
58+
<p>
59+
Components Overview:
60+
</p>
61+
<ul>
62+
<li>List Item: Represents an individual item within the list.</li>
63+
<li>List Item Button: A clickable button within a list item.</li>
64+
<li>List Item Icon: Displays an icon associated with a list item.</li>
65+
<li>List Item Avatar: Adds an avatar for visual representation within the list item.</li>
66+
<li>List Item Text: Contains the primary and secondary text within a list item.</li>
67+
<li>List Subheader: Provides a labeled header for grouping related list items.</li>
68+
</ul>
69+
70+
<a id="Types of List component">
71+
<p><h3> Types of List component </h3></p>
72+
</a>
73+
<a id="List">
74+
<h4>1. List</h4>
75+
</a>
76+
<p>The base container for organizing related content in vertical layouts.</p>
77+
<p><strong>Basic Usage:</strong></p>
78+
<Row $Hcenter className="image-container">
79+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
80+
81+
<List>
82+
<ListItem>
83+
<ListItemText primary="Layer5 Sistent Item 1" />
84+
</ListItem>
85+
<ListItem>
86+
<ListItemText primary="Layer5 Sistent Item 2" />
87+
</ListItem>
88+
<ListItem>
89+
<ListItemText primary="Layer5 Sistent Item 3" />
90+
</ListItem>
91+
</List>
92+
93+
</SistentThemeProvider>
94+
</Row>
95+
96+
<a id="List Item">
97+
<h4>2. List Item</h4>
98+
</a>
99+
<p>
100+
Represents an individual entry in a list. Includes primary and optional secondary text.
101+
</p>
102+
<Row $Hcenter className="image-container">
103+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
104+
<List>
105+
<ListItem>
106+
<ListItemText primary="Layer5 Sistent Primary Item" secondary="Layer5 Sistent Supporting text" />
107+
</ListItem>
108+
<ListItem>
109+
<ListItemText primary="Layer5 Sistent Another Item" />
110+
</ListItem>
111+
</List>
112+
</SistentThemeProvider>
113+
</Row>
114+
<a id="List Item Button">
115+
<h4>3. List Item Button</h4>
116+
</a>
117+
<p>
118+
Adds interactivity to list items, making them actionable.
119+
</p>
120+
<Row $Hcenter className="image-container">
121+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
122+
<List>
123+
<ListItemButton onClick={() => {}}>
124+
Layer5 Sistent Action Item 1
125+
</ListItemButton>
126+
<ListItemButton onClick={() => {}}>
127+
Layer5 Sistent Action Item2
128+
</ListItemButton>
129+
</List>
130+
</SistentThemeProvider>
131+
</Row>
132+
133+
<a id="List with Icons">
134+
<h4>4. List with Icons</h4>
135+
</a>
136+
<p>
137+
Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context.
138+
</p>
139+
<Row $Hcenter className="image-container">
140+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
141+
<List>
142+
<ListItem>
143+
<ListItemIcon><StarIcon /></ListItemIcon>
144+
<ListItemText primary="Layer5 Sistent Starred" />
145+
</ListItem>
146+
<ListItem>
147+
<ListItemIcon><CalendarTodayIcon /></ListItemIcon>
148+
<ListItemText primary="Layer5 Sistent Calendar" />
149+
</ListItem>
150+
<ListItem>
151+
<ListItemIcon><NotificationsIcon /></ListItemIcon>
152+
<ListItemText primary="Layer5 Sistent Notification" />
153+
</ListItem>
154+
<ListItem>
155+
<ListItemIcon><CheckIcon /></ListItemIcon>
156+
<ListItemText primary="Layer5 Sistent Completed Task" />
157+
</ListItem>
158+
<ListItem>
159+
<ListItemIcon><CloseIcon /></ListItemIcon>
160+
<ListItemText primary="Layer5 Sistent Incomplete Task" />
161+
</ListItem>
162+
</List>
163+
</SistentThemeProvider>
164+
</Row>
165+
<a id="List with Avatars">
166+
<h4>5. List with Avatars</h4>
167+
</a>
168+
<p>
169+
Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface.
170+
</p>
171+
<Row $Hcenter className="image-container">
172+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
173+
<List>
174+
<ListItem>
175+
<ListItemAvatar><PersonIcon /></ListItemAvatar>
176+
<ListItemText primary="Layer5 Sistent User 1" />
177+
</ListItem>
178+
<ListItem>
179+
<ListItemAvatar><EngineeringIcon /></ListItemAvatar>
180+
<ListItemText primary="Layer5 Sistent User 2" />
181+
</ListItem>
182+
</List>
183+
</SistentThemeProvider>
184+
</Row>
185+
<a id="List Subheader">
186+
<h4>6. List Subheader</h4>
187+
</a>
188+
<p>
189+
Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization.
190+
</p>
191+
<Row $Hcenter className="image-container">
192+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
193+
<List>
194+
<ListSubheader>Section 1</ListSubheader>
195+
<ListItem>
196+
<ListItemText primary="Layer5 Sistent Item A" />
197+
</ListItem>
198+
<ListItem>
199+
<ListItemText primary="Layer5 Sistent Item B" />
200+
</ListItem>
201+
<Divider />
202+
<ListSubheader>Section 2</ListSubheader>
203+
<ListItem>
204+
<ListItemText primary="Layer5 Sistent Item C" />
205+
</ListItem>
206+
<ListItem>
207+
<ListItemText primary="Layer5 Sistent Item D" />
208+
</ListItem>
209+
</List>
210+
</SistentThemeProvider>
211+
</Row>
212+
</div>
213+
</div>
214+
</SistentLayout>
215+
);
216+
};
217+
export default SistentList;

0 commit comments

Comments
 (0)