Added Link section documenting the Link component used in Sistent

src/pages/projects/sistent/components/link/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/pages/projects/sistent/components/link/code.js

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

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

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

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

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

src/pages/projects/sistent/components/link/link.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Link = () => {
+  return (
+    <div>Link</div>
+  );
+};
+
+export default Link;

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

@@ -30,6 +30,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/modal",
   },
+  {
+    id: 4,
+    name: "Link",
+    description:
+      "A link component is a navigational element that directs users to another page or section within an application",
+    url: "/projects/sistent/components/link",
+  },
 ];
 
 const SistentComponents = () => {

src/sections/Projects/Sistent/components/link/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>
+  );
+};