Added List component to the sistent components page

src/sections/Pricing/feature_data.json

@@ -959,38 +959,6 @@
     },
     "docs": "https://docs.layer5.io/cloud/catalog/"
   },
-  {
-    "theme": "",
-    "categoryOrder": "7",
-    "category": "Catalog",
-    "functionOrder": "709",
-    "function": "Single and multiple approvers",
-    "feature": "",
-    "subscription_tier": "",
-    "comparison_tiers": {
-      "free": "",
-      "teamDesigner": "",
-      "teamOperator": "",
-      "enterprise": ""
-    },
-    "docs": "https://docs.layer5.io/cloud/catalog/"
-  },
-  {
-    "theme": "",
-    "categoryOrder": "7",
-    "category": "Catalog",
-    "functionOrder": "710",
-    "function": "Import Filter",
-    "feature": "Import a publish WASM filter",
-    "subscription_tier": "",
-    "comparison_tiers": {
-      "free": "",
-      "teamDesigner": "",
-      "teamOperator": "",
-      "enterprise": ""
-    },
-    "docs": "https://docs.meshery.io/guides/configuration-management/filter-management"
-  },
   {
     "theme": "",
     "categoryOrder": "",

src/sections/Projects/Sistent/components/content.js

@@ -95,6 +95,14 @@ const componentsData = [
     url: "/projects/sistent/components/backdrop",
     src: "/backdrop",
   },
+  {
+    id: 13,
+    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",
+    src: "/list",
+  },
 ];
 
 module.exports = { componentsData };

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

@@ -9,7 +9,6 @@ import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import { Link } from "gatsby";
 import { componentsData } from "./content";
 
-
 const SistentComponents = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const { queryResults, searchData } = useDataList(

src/sections/Projects/Sistent/components/list/code-block.js

@@ -0,0 +1,20 @@
+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>
+  );
+};

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

@@ -0,0 +1,199 @@
+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 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>`,
+];
+
+const ListCode = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="List">
+      <div className="content">
+        <a id="Identity"><h2>List</h2></a>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>
+                    <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><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("Layer5 List Item 1 Button Clicked!")}> Layer5 Sistent Action Item 1</ListItemButton>
+                  <ListItemButton onClick={() => alert("Layer5 List Item 2 Button Clicked!")}>Layer5 Sistent Action Item 2</ListItemButton>
+                </List>
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="button-list" code={codes[4]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+export default ListCode;