move shared components to files

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

@@ -1,12 +1,11 @@
 import React from "react";
+import { CodeBlock } from "../button/code-block";
 
 import { SistentThemeProvider } from "@layer5/sistent";
-import { CodeBlock } from "./code-block";
+
 import { SistentLayout } from "../../sistent-layout";
 
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
-import SectionNav from "./section-nav";
-import Header from "./header";
 import {
   FormControl,
   FormHelperText,
@@ -16,6 +15,7 @@ import {
   OutlinedInput,
   Select,
 } from "@mui/material";
+import { Header, SectionNav } from ".";
 
 const codes = {
   "variant-outlined": `<Select>

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

@@ -13,8 +13,7 @@ import {
   OutlinedInput,
 } from "@mui/material";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
-import SectionNav from "./section-nav";
-import Header from "./header";
+import { Header, SectionNav } from ".";
 const SelectGuidance = () => {
   const { isDark } = useStyledDarkMode();
   const [selectedAge, setSelectedAge] = React.useState("");

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

@@ -2,16 +2,17 @@ import React from "react";
 import { SistentThemeProvider } from "@layer5/sistent";
 import { SistentLayout } from "../../sistent-layout";
 import { Row } from "../../../../../reusecore/Layout";
+import { useLocation } from "@reach/router";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+import { navigate } from "gatsby";
+import TabButton from "../../../../../reusecore/Button";
 import {
   FormControl,
   InputLabel,
   MenuItem,
   Select,
   OutlinedInput,
 } from "@mui/material";
-import Header from "./header";
-import SectionNav from "./section-nav";
 
 const SistentSelect = () => {
   const { isDark } = useStyledDarkMode();
@@ -223,4 +224,52 @@ const SistentSelect = () => {
   );
 };
 
+export function SectionNav() {
+  const location = useLocation();
+  return (
+    <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/selet/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>
+  );
+}
+
+export function Header() {
+  return (
+    <>
+      <a id="Identity">
+        <h2>Select</h2>
+      </a>
+      <p>
+        Select component is a dropdown menu for selecting an option from a list.
+      </p>
+    </>
+  );
+}
+
 export default SistentSelect;