Added Modal Component

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

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { ModalGuidance } from "../../../../../sections/Projects/Sistent/components/modal/guidance";
+
+const ModalGuidancePage = () => {
+  return <ModalGuidance />;
+};
+
+export default ModalGuidancePage;

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

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

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

@@ -22,6 +22,13 @@ const componentsData = [
       "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
     url: "/projects/sistent/components/text-input",
   },
+  {
+    id: 3,
+    name: "Modal",
+    description:
+      "A modal is a container that appears in front of the main content on a page, providing important information or an actionable piece of content for users to execute.",
+    url: "/projects/sistent/components/modal",
+  }
 ];
 
 const SistentComponents = () => {

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

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+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 && (
+        <pre className="code">
+          <code lang="javascript">{code}</code>
+        </pre>
+      )}
+    </div>
+  );
+};