Create separate components for header and section-nav from the select/index.js, as they can be genralised and reused in other components as well.

Signed-off-by: Falgun Patel <[email protected]>

Author: falgunmpatel

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

@@ -0,0 +1,15 @@
+import React from "react";
+
+//TODO: Generalise for use in every component
+export default 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>
+    </>
+  );
+}

src/sections/Projects/Sistent/components/section-nav/section-nav.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { useLocation } from "@reach/router";
+import { navigate } from "gatsby";
+import TabButton from "../../../../../reusecore/Button";
+
+export default 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>
+  );
+}

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

@@ -15,7 +15,8 @@ import {
   OutlinedInput,
   Select,
 } from "@mui/material";
-import { Header, SectionNav } from ".";
+import Header from "../header/header";
+import SectionNav from "../section-nav/section-nav";
 
 const codes = {
   "variant-outlined": `<Select>

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

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

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

@@ -2,17 +2,16 @@ 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/header";
+import SectionNav from "../section-nav/section-nav";
 
 const SistentSelect = () => {
   const { isDark } = useStyledDarkMode();
@@ -224,52 +223,4 @@ 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;