Add TextField component to the sistent components page layer5io#5948

Signed-off-by: nooras <[email protected]>

src/components/SistentNavigation/content.js

@@ -43,4 +43,19 @@ export const content = [
     link: "/projects/sistent/components/text-input/code",
     text: "Text Input",
   },
+  {
+    id: 15,
+    link: "/projects/sistent/components/text-field",
+    text: "Text Field",
+  },
+  {
+    id: 16,
+    link: "/projects/sistent/components/text-field/guidance",
+    text: "Text Field",
+  },
+  {
+    id: 17,
+    link: "/projects/sistent/components/text-field/code",
+    text: "Text Field",
+  },
 ];

src/pages/projects/sistent/components/text-field/code.js

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

src/pages/projects/sistent/components/text-field/guidance.js

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

src/pages/projects/sistent/components/text-field/index.js

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

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: "Text Field",
+    description:
+      "The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
+    url: "/projects/sistent/components/text-field",
+  }
 ];
 
 const SistentComponents = () => {

src/sections/Projects/Sistent/components/text-field/code-block.js

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