Update select/guidance.js

Signed-off-by: Vivek Vishal <[email protected]>

Author: Vivek Vishal

src/sections/Projects/Sistent/components/select/guidance.js

@@ -13,7 +13,10 @@ import {
   OutlinedInput,
 } from "@mui/material";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
-import { Header, SectionNav } from ".";
+import { useLocation } from "@reach/router";
+import { navigate } from "gatsby";
+import TabButton from "../../../../../reusecore/Button";
+
 const SelectGuidance = () => {
   const { isDark } = useStyledDarkMode();
   const [selectedAge, setSelectedAge] = React.useState("");
@@ -22,11 +25,45 @@ const SelectGuidance = () => {
     let agesList = event.target.value;
     setMultipleAges(agesList);
   };
+  const location = useLocation();
   return (
     <SistentLayout title="Select">
       <div className="content">
-        <Header />
-        <SectionNav />
+        <a id="Identity">
+          <h2>Select</h2>
+        </a>
+        <p>
+        Select component is a dropdown menu for selecting an option from a list.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/select"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/select")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/select/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/select/guidance")}
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/select/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/select/code")}
+            title="Code"
+          />
+        </div>
         <div className="main-content">
           <a id="Functions">
             <h2>Functions</h2>