Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Sistent] Select component doc #6177

Merged
merged 11 commits into from
Feb 20, 2025
Merged
Prev Previous commit
Next Next commit
extract section navigation and header
Signed-off-by: nganphan123 <[email protected]>
nganphan123 committed Jan 29, 2025
commit c1ffbdb117b4e7bb59ac1a78431fa53262019785
13 changes: 13 additions & 0 deletions src/sections/Projects/Sistent/components/select/header.js
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
43 changes: 4 additions & 39 deletions src/sections/Projects/Sistent/components/select/index.js
Original file line number Diff line number Diff line change
@@ -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
38 changes: 38 additions & 0 deletions src/sections/Projects/Sistent/components/select/section-nav.js
Original file line number Diff line number Diff line change
@@ -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>
);
}