Skip to content

Commit

Permalink
Update: Adjusted index and code files for the List component.
Browse files Browse the repository at this point in the history 
Signed-off-by: Roshan Goswami <[email protected]>
  • Loading branch information
@csengineer1990
csengineer1990 committed Dec 25, 2024
1 parent cc194c9 commit 3722bc5
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 44 deletions.
36 changes: 11 additions & 25 deletions src/sections/Projects/Sistent/components/list/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,51 +9,37 @@ import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const codes = [
// Basic List with List Items
` <SistentThemeProvider>
<List>
` <List>
<ListItem><ListItemText primary="Layer5 Sistent 1" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sistent 2" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sistent 3" /></ListItem>
</List>
</SistentThemeProvider>`,

</List> `,
// List with Icons in List Items
` <SistentThemeProvider>
<List>
` <List>
<ListItem><ListItemIcon>🌟</ListItemIcon><ListItemText primary="Layer5 Sistent Starred" /></ListItem>
<ListItem><ListItemIcon>📅</ListItemIcon><ListItemText primary="Layer5 Sistent Calender" /></ListItem>
<ListItem><ListItemIcon>🔔</ListItemIcon><ListItemText primary="Layer5 Sistent Notification" /></ListItem>
</List>
</SistentThemeProvider>`,

</List> `,
// List with Avatars
` <SistentThemeProvider>
<List>
` <List>
<ListItem><ListItemAvatar>👤</ListItemAvatar><ListItemText primary="Layer5 Sistent User 1" /></ListItem>
<ListItem><ListItemAvatar>👩‍💻</ListItemAvatar><ListItemText primary="Layer5 Sistent User 2" /></ListItem>
<ListItem><ListItemAvatar>👤</ListItemAvatar><ListItemText primary="Layer5 Sistent User 3" /></ListItem>
</List>
</SistentThemeProvider>`,

</List> `,
// List with Subheader
` <SistentThemeProvider>
<List>
` <List>
<ListSubheader>Section 1</ListSubheader>
<ListItem><ListItemText primary="Layer5 Sistent A" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sistent B" /></ListItem>
<ListSubheader>Section 2</ListSubheader>
<ListItem><ListItemText primary="Layer5 Sistent C" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sistent D" /></ListItem>
</List>
</SistentThemeProvider>`,

</List> `,
// List with Action Buttons
` <SistentThemeProvider>
<List>
` <List>
<ListItemButton onClick={() => alert("Clicked!")}> Layer5 Sistent Action 1</ListItemButton>
<ListItemButton onClick={() => alert("Clicked!")}>Layer5 Sistent Action 2</ListItemButton>
</List>
</SistentThemeProvider>`,
</List> `,
];

const ListCode = () => {
Expand All @@ -63,7 +49,7 @@ const ListCode = () => {
return (
<SistentLayout title="List">
<div className="content">
<a id="Identity"><h2>List</h2></a>a
<a id="Identity"><h2>List</h2></a>
<p>
The List component displays a list of items in a structured and
accessible manner. Variants include simple lists, lists with icons,
Expand Down
39 changes: 20 additions & 19 deletions src/sections/Projects/Sistent/components/list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,6 @@ const SistentList = () => {
/>
</div>
<div className="main-content">
<a id="List Components">
</a>
<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>
<p>
The List component is designed to:
Expand All @@ -50,26 +48,24 @@ const SistentList = () => {
<li><strong>Customizable Design:</strong> Offers size variations, dense modes, and alignment options.</li>
<li><strong>Accessibility:</strong> Ensures keyboard navigation and visual feedback for enhanced usability.</li>
</ul>
<a id="Components Overview">
</a>
<p>
Components Overview:
</p>

<ul>
<li>List Item: Represents an individual item within the list.</li>
<li>List Item Button: A clickable button within a list item.</li>
<li>List Item Icon: Displays an icon associated with a list item.</li>
<li>List Item Avatar: Adds an avatar for visual representation within the list item.</li>
<li>List Item Text: Contains the primary and secondary text within a list item.</li>
<li>List Subheader: Provides a labeled header for grouping related list items.</li>

</ul>

<a id="Types of List component">
<p><h3> Types of List component </h3></p>
</a>
<a id="List">
<h4>1. List</h4>
</a>
<p><h3> Types of List component </h3></p>
<a id="List"></a>
<h4>1. List</h4>
<p>The base container for organizing related content in vertical layouts.</p>
<p><strong>Basic Usage:</strong></p>
<Row $Hcenter className="image-container">
Expand All @@ -90,8 +86,9 @@ const SistentList = () => {
</SistentThemeProvider>
</Row>

<a id="List Item"></a>
<h4>2. List Item</h4>
<a id="List Item">
<h4>2. List Item</h4>
</a>
<p>
Represents an individual entry in a list. Includes primary and optional secondary text.
</p>
Expand All @@ -107,8 +104,9 @@ const SistentList = () => {
</List>
</SistentThemeProvider>
</Row>
<a id="List Item Button"></a>
<h4>3. List Item Button</h4>
<a id="List Item Button">
<h4>3. List Item Button</h4>
</a>
<p>
Adds interactivity to list items, making them actionable.
</p>
Expand All @@ -125,8 +123,9 @@ const SistentList = () => {
</SistentThemeProvider>
</Row>

<a id="List with Icons"></a>
<h4>4. List with Icons</h4>
<a id="List with Icons">
<h4>4. List with Icons</h4>
</a>
<p>
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.
</p>
Expand Down Expand Up @@ -156,8 +155,9 @@ const SistentList = () => {
</List>
</SistentThemeProvider>
</Row>
<a id="List with Avatars"></a>
<h4>5. List with Avatars</h4>
<a id="List with Avatars">
<h4>5. List with Avatars</h4>
</a>
<p>
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.
</p>
Expand All @@ -175,8 +175,9 @@ const SistentList = () => {
</List>
</SistentThemeProvider>
</Row>
<a id="List Subheader"></a>
<h4>6. List Subheader</h4>
<a id="List Subheader">
<h4>6. List Subheader</h4>
</a>
<p>
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.
</p>
Expand Down

0 comments on commit 3722bc5

Please sign in to comment.