Skip to content

Commit

Permalink
Added List component to the sistent components page
Browse files Browse the repository at this point in the history 
Signed-off-by: Roshan Goswami <[email protected]>
  • Loading branch information
@csengineer1990
csengineer1990 committed Nov 20, 2024
1 parent 8cdb3cb commit 96771e4
Show file tree
Hide file tree
Showing 8 changed files with 794 additions and 0 deletions.
8 changes: 8 additions & 0 deletions src/pages/projects/sistent/components/list/code.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from "react";
import { ListCode } from "../../../../../sections/Projects/Sistent/components/list/code";

const ListCodePage = () => {
return <ListCode />;
};

export default ListCodePage;
7 changes: 7 additions & 0 deletions src/pages/projects/sistent/components/list/guidance.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";
import { ListGuidance } from "../../../../../sections/Projects/Sistent/components/list/guidance";

const ListGuidancePage = () => {
return <ListGuidance />;
};
export default ListGuidancePage;
6 changes: 6 additions & 0 deletions src/pages/projects/sistent/components/list/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from "react";
import SistentList from "../../../../../sections/Projects/Sistent/components/list";
const SistentListPage = () => {
return <SistentList/>;
};
export default SistentListPage;
7 changes: 7 additions & 0 deletions src/sections/Projects/Sistent/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,13 @@ const componentsData = [
"ButtonGroup is a component that groups multiple buttons together.",
url: "/projects/sistent/components/button-group",
},
{
id: 10,
name: "List",
description:
"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.",
url: "/projects/sistent/components/list",
},
];

const SistentComponents = () => {
Expand Down
21 changes: 21 additions & 0 deletions src/sections/Projects/Sistent/components/list/code-block.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React, { useState } from "react";
import Code from "../../../../../components/CodeBlock";

export const CodeBlock = ({ name, code }) => {
const [showCode, setShowCode] = useState(false);
const onChange = () => {
setShowCode((prev) => !prev);
};

return (
<div className="show-code">
<input type="checkbox" name={name} id={name} onChange={onChange} />
<label htmlFor={name} className="label">
Show Code
</label>
{showCode && (
<Code codeString={code} language="javascript" />
)}
</div>
);
};
205 changes: 205 additions & 0 deletions src/sections/Projects/Sistent/components/list/code.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";
import { List, ListItemIcon, ListItemAvatar, ListItemText,ListItem,ListSubheader, ListItemButton, SistentThemeProvider, Divider } from "@layer5/sistent";
import { CodeBlock } from "./code-block";
import { SistentLayout } from "../../sistent-layout";
//import { FaArrowRight,FaUser, FaFolder, FaFile } from "react-icons/fa";
import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const codes = [
// Basic List with List Items
` <SistentThemeProvider>
<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 with Icons in List Items
` <SistentThemeProvider>
<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 with Avatars
` <SistentThemeProvider>
<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 with Subheader
` <SistentThemeProvider>
<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 with Action Buttons
` <SistentThemeProvider>
<List>
<ListItemButton onClick={() => alert("Clicked!")}> Layer5 Sistent Action 1</ListItemButton>
<ListItemButton onClick={() => alert("Clicked!")}>Layer5 Sistent Action 2</ListItemButton>
</List>
</SistentThemeProvider>`,
];

export const ListCode = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="List">
<div className="content">
<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,
lists with avatars, and lists with action buttons.
</p>

<div className="filterBtns">
<TabButton
className={location.pathname === "/projects/sistent/components/list" ? "active" : ""}
onClick={() => navigate("/projects/sistent/components/list")}
title="Overview"
/>
<TabButton
className={location.pathname === "/projects/sistent/components/list/guidance" ? "active" : ""}
onClick={() => navigate("/projects/sistent/components/list/guidance")}
title="Guidance"
/>
<TabButton
className={location.pathname === "/projects/sistent/components/list/code" ? "active" : ""}
onClick={() => navigate("/projects/sistent/components/list/code")}
title="Code"
/>
</div>
<div className="main-content">
{/* Simple List */}
<a id="Simple List"><h3>Simple List</h3></a>
<p>This is a basic list with plain text items.</p>
<div className="showcase">
<div className="items">

<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<List>
<ListItem><ListItemText primary="Layer5 Sistent Item 1" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sistent Item 2" /></ListItem>
<ListItem><ListItemText primary="Layer5 Sistent Item 3" /></ListItem>
</List>
</SistentThemeProvider>

</div>
<CodeBlock name="simple-list" code={codes[0]} />
</div>

{/* List with Icons */}
<a id="List With Icons"><h3>List with Icons</h3></a>
<p>List items can be paired with icons to add visual cues.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<List>
{/* <ListItem icon={<FaFile />} primaryText="Document" />
<ListItem icon={<FaFolder />} primaryText="Folder" />
<ListItem icon={<FaUser />} primaryText="Profile" /> */}
<ListItem>
<ListItemIcon>🌟</ListItemIcon>
<ListItemText primary="Layer5 Sistent Starred" />
</ListItem>
<ListItem>
<ListItemIcon>📅</ListItemIcon>
<ListItemText primary="Layer5 Sistent Calendar" />
</ListItem>
<ListItem>
<ListItemIcon>🔔</ListItemIcon>
<ListItemText primary="Layer5 Sistent Notification" />
</ListItem>
</List>
</SistentThemeProvider>
</div>
<CodeBlock name="icon-list" code={codes[1]} />
</div>

{/* List with Avatars */}
<a id="List With Avatars"><h3>List with Avatars</h3></a>
<p>Use avatars for list items representing people or entities.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<List>
{/* <ListItem avatar="👤" primaryText="User 1" />
<ListItem avatar="👤" primaryText="User 2" />
<ListItem avatar="👤" primaryText="User 3" /> */}
<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>
</div>
<CodeBlock name="avatar-list" code={codes[2]} />
</div>

{/* List with Subheader */}
<a id="List With Subheader"><h3>List with Subheader</h3></a>
<p>Organize list items under different subheaders for better grouping.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<List>
<ListSubheader>Section 1</ListSubheader>
<ListItem>
<ListItemText primary="Layer5 Sistent Item A" />
</ListItem>
<ListItem>
<ListItemText primary="Layer5 Sistent Item B" />
</ListItem>
<Divider />
<ListSubheader>Section 2</ListSubheader>
<ListItem>
<ListItemText primary="Layer5 Sistent Item C" />
</ListItem>
<ListItem>
<ListItemText primary="Layer5 Sistent Item D" />
</ListItem>
</List>
</SistentThemeProvider>
</div>
<CodeBlock name="subheader-list" code={codes[3]} />
</div>

{/* List with Action Buttons */}
<a id="List With ActionButtons"><h3>List with Action Buttons</h3></a>
<p>Lists can also have action buttons for added interactivity.</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<List>
{/* <ListItem text="Action Item 1" secondaryAction={<button>Action</button>} />
<ListItem text="Action Item 2" secondaryAction={<button>More</button>} /> */}
<ListItemButton onClick={() => alert("Clicked!")}> Layer5 Sistent Action Item 1</ListItemButton>
<ListItemButton onClick={() => alert("Clicked!")}>Layer5 Sistent Action Item 2</ListItemButton>
</List>
</SistentThemeProvider>
</div>
<CodeBlock name="button-list" code={codes[4]} />
</div>
</div>
</div>
</SistentLayout>
);
};
Loading

0 comments on commit 96771e4

Please sign in to comment.