Added List component to the sistent components page

feature_data.json

@@ -951,6 +951,149 @@
       "Theme (also: Keychain Name)": "Support and Deployment"
     }
   },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "VirtualService",
+      "Function": "VirtualService",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "DestinationRule",
+      "Function": "DestinationRule",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "mTLS (PeerAuthentication)",
+      "Function": "mTLS (PeerAuthentication)",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "AuthorizationPolicy",
+      "Function": "AuthorizationPolicy",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "EnvoyFilters",
+      "Function": "EnvoyFilters",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "Istio Operator",
+      "Function": "Istio Operator",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "Ingress Gateway (Gateways)",
+      "Function": "Ingress Gateway (Gateways)",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "Egress Gateway (Gateways)",
+      "Function": "Egress Gateway (Gateways)",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Istio",
+      "Documented?": "",
+      "Feature": "Custom Configuration",
+      "Function": "Custom Configuration",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Pattern Support: Kubernetes",
+      "Documented?": "",
+      "Feature": "Ingress",
+      "Function": "Ingress",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
+  {
+    "pricing_page": "true",
+    "entire_row": {
+      "Category": "Multi-Mesh",
+      "Documented?": "",
+      "Feature": "Canary Rollout",
+      "Function": "Canary Rollout",
+      "Pricing page?": "X",
+      "Subscription Tier": "Free",
+      "Tech": "Adapter",
+      "Theme (also: Keychain Name)": "Configuration Management"
+    }
+  },
   {
     "pricing_page": "true",
     "entire_row": {

src/pages/projects/sistent/components/list/code.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { ListCode } from "../../../../../sections/Projects/Sistent/components/list/code";
+
+const ListCodePage = () => {
+  return <ListCode />;
+};
+
+export default ListCodePage;

src/pages/projects/sistent/components/list/guidance.js

@@ -0,0 +1,7 @@
+import React from "react";
+import {  ListGuidance } from "../../../../../sections/Projects/Sistent/components/list/guidance";
+
+const ListGuidancePage = () => {
+  return <ListGuidance />;
+};
+export default ListGuidancePage;

src/pages/projects/sistent/components/list/index.js

@@ -0,0 +1,6 @@
+import React from "react";
+import SistentList from "../../../../../sections/Projects/Sistent/components/list";
+const SistentListPage = () => {
+  return <SistentList/>;
+};
+export default SistentListPage;

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

@@ -79,6 +79,13 @@ const componentsData = [
       "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
     url: "/projects/sistent/components/box",
   },
+  {
+    id: 11,
+    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 = () => {

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

@@ -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>
+  );
+};