From 845c5c3b7c9eacb54182e3d109d6500496b184ba Mon Sep 17 00:00:00 2001
From: nganphan123 <jill01009@gmail.com>
Date: Tue, 31 Dec 2024 03:21:54 -0800
Subject: [PATCH] extract section navigation and header

---
 .../Sistent/components/select/header.js       | 13 ++++++
 .../Sistent/components/select/index.js        | 43 ++-----------------
 .../Sistent/components/select/section-nav.js  | 38 ++++++++++++++++
 3 files changed, 55 insertions(+), 39 deletions(-)
 create mode 100644 src/sections/Projects/Sistent/components/select/header.js
 create mode 100644 src/sections/Projects/Sistent/components/select/section-nav.js

diff --git a/src/sections/Projects/Sistent/components/select/header.js b/src/sections/Projects/Sistent/components/select/header.js
new file mode 100644
index 000000000000..84f3f0008946
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/select/header.js
@@ -0,0 +1,13 @@
+import React from "react";
+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>
+    </>
+  );
+}
diff --git a/src/sections/Projects/Sistent/components/select/index.js b/src/sections/Projects/Sistent/components/select/index.js
index 082b9bedec7b..e22159e4ad60 100644
--- a/src/sections/Projects/Sistent/components/select/index.js
+++ b/src/sections/Projects/Sistent/components/select/index.js
@@ -17,6 +17,8 @@ import {
   Select,
   OutlinedInput,
 } from "@mui/material";
+import Header from "./header";
+import SectionNav from "./section-nav";
 
 const SistentSelect = () => {
   const location = useLocation();
@@ -30,45 +32,8 @@ const SistentSelect = () => {
   return (
     <SistentLayout title="Select">
       <div className="content">
-        <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>
+        <Header />
+        <SectionNav />
         <div className="main-content">
           <p>
             The Select component is a versatile and customizable element
diff --git a/src/sections/Projects/Sistent/components/select/section-nav.js b/src/sections/Projects/Sistent/components/select/section-nav.js
new file mode 100644
index 000000000000..fa6098591ac8
--- /dev/null
+++ b/src/sections/Projects/Sistent/components/select/section-nav.js
@@ -0,0 +1,38 @@
+import { navigate } from "gatsby";
+import TabButton from "../../../../../reusecore/Button";
+import React from "react";
+import { useLocation } from "@reach/router";
+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>
+  );
+}