Skip to content

Commit e30e178

Browse files
author
Vivek Vishal
authored
DRY-do-not-repeat
1 parent caf53c5 commit e30e178

File tree

5 files changed

+68
-119
lines changed

5 files changed

+68
-119
lines changed

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

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,8 @@ import {
1515
OutlinedInput,
1616
Select,
1717
} from "@mui/material";
18-
19-
import { useLocation } from "@reach/router";
20-
import { navigate } from "gatsby";
21-
import TabButton from "../../../../../reusecore/Button";
18+
import SectionNav from "./section-nav";
19+
import Header from "./header";
2220

2321
const codes = {
2422
"variant-outlined": `<Select>
@@ -155,45 +153,11 @@ const SelectCode = () => {
155153
let agesList = event.target.value;
156154
setMultipleAges(agesList);
157155
};
158-
const location = useLocation();
159156
return (
160157
<SistentLayout title="Select">
161158
<div className="content">
162-
<a id="Identity">
163-
<h2>Select</h2>
164-
</a>
165-
<p>
166-
Select component is a dropdown menu for selecting an option from a list.
167-
</p>
168-
<div className="filterBtns">
169-
<TabButton
170-
className={
171-
location.pathname === "/projects/sistent/components/select"
172-
? "active"
173-
: ""
174-
}
175-
onClick={() => navigate("/projects/sistent/components/select")}
176-
title="Overview"
177-
/>
178-
<TabButton
179-
className={
180-
location.pathname === "/projects/sistent/components/select/guidance"
181-
? "active"
182-
: ""
183-
}
184-
onClick={() => navigate("/projects/sistent/components/select/guidance")}
185-
title="Guidance"
186-
/>
187-
<TabButton
188-
className={
189-
location.pathname === "/projects/sistent/components/select/code"
190-
? "active"
191-
: ""
192-
}
193-
onClick={() => navigate("/projects/sistent/components/select/code")}
194-
title="Code"
195-
/>
196-
</div>
159+
<Header />
160+
<SectionNav />
197161

198162
<div className="main-content">
199163
<a id="Select variants">

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

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,8 @@ import {
1313
OutlinedInput,
1414
} from "@mui/material";
1515
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
16-
import { useLocation } from "@reach/router";
17-
import { navigate } from "gatsby";
18-
import TabButton from "../../../../../reusecore/Button";
19-
16+
import SectionNav from "./section-nav";
17+
import Header from "./header";
2018
const SelectGuidance = () => {
2119
const { isDark } = useStyledDarkMode();
2220
const [selectedAge, setSelectedAge] = React.useState("");
@@ -25,45 +23,11 @@ const SelectGuidance = () => {
2523
let agesList = event.target.value;
2624
setMultipleAges(agesList);
2725
};
28-
const location = useLocation();
2926
return (
3027
<SistentLayout title="Select">
3128
<div className="content">
32-
<a id="Identity">
33-
<h2>Select</h2>
34-
</a>
35-
<p>
36-
Select component is a dropdown menu for selecting an option from a list.
37-
</p>
38-
<div className="filterBtns">
39-
<TabButton
40-
className={
41-
location.pathname === "/projects/sistent/components/select"
42-
? "active"
43-
: ""
44-
}
45-
onClick={() => navigate("/projects/sistent/components/select")}
46-
title="Overview"
47-
/>
48-
<TabButton
49-
className={
50-
location.pathname === "/projects/sistent/components/select/guidance"
51-
? "active"
52-
: ""
53-
}
54-
onClick={() => navigate("/projects/sistent/components/select/guidance")}
55-
title="Guidance"
56-
/>
57-
<TabButton
58-
className={
59-
location.pathname === "/projects/sistent/components/select/code"
60-
? "active"
61-
: ""
62-
}
63-
onClick={() => navigate("/projects/sistent/components/select/code")}
64-
title="Code"
65-
/>
66-
</div>
29+
<Header />
30+
<SectionNav />
6731
<div className="main-content">
6832
<a id="Functions">
6933
<h2>Functions</h2>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
3+
function Header() {
4+
return (
5+
<>
6+
<a id="Identity">
7+
<h2>Select</h2>
8+
</a>
9+
<p>
10+
Select component is a dropdown menu for selecting an option from a list.
11+
</p>
12+
</>
13+
);
14+
}
15+
export default Header;

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

Lines changed: 5 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import React from "react";
22
import { SistentThemeProvider } from "@layer5/sistent";
33
import { SistentLayout } from "../../sistent-layout";
44
import { Row } from "../../../../../reusecore/Layout";
5-
import { useLocation } from "@reach/router";
5+
66
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
7-
import { navigate } from "gatsby";
8-
import TabButton from "../../../../../reusecore/Button";
97
import {
108
FormControl,
119
InputLabel,
1210
MenuItem,
1311
Select,
1412
OutlinedInput,
1513
} from "@mui/material";
14+
import SectionNav from "./section-nav";
15+
import Header from "./header";
1616

1717
const SistentSelect = () => {
1818
const { isDark } = useStyledDarkMode();
@@ -21,46 +21,12 @@ const SistentSelect = () => {
2121
let agesList = event.target.value;
2222
setMultipleAges(agesList);
2323
};
24-
const location = useLocation();
2524

2625
return (
2726
<SistentLayout title="Select">
2827
<div className="content">
29-
<a id="Identity">
30-
<h2>Select</h2>
31-
</a>
32-
<p>
33-
Select component is a dropdown menu for selecting an option from a list.
34-
</p>
35-
<div className="filterBtns">
36-
<TabButton
37-
className={
38-
location.pathname === "/projects/sistent/components/select"
39-
? "active"
40-
: ""
41-
}
42-
onClick={() => navigate("/projects/sistent/components/select")}
43-
title="Overview"
44-
/>
45-
<TabButton
46-
className={
47-
location.pathname === "/projects/sistent/components/select/guidance"
48-
? "active"
49-
: ""
50-
}
51-
onClick={() => navigate("/projects/sistent/components/select/guidance")}
52-
title="Guidance"
53-
/>
54-
<TabButton
55-
className={
56-
location.pathname === "/projects/sistent/components/select/code"
57-
? "active"
58-
: ""
59-
}
60-
onClick={() => navigate("/projects/sistent/components/select/code")}
61-
title="Code"
62-
/>
63-
</div>
28+
<Header />
29+
<SectionNav />
6430
<div className="main-content">
6531
<p>
6632
The Select component is a versatile and customizable element

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import { useLocation } from "@reach/router";
3+
import { navigate } from "gatsby";
4+
import TabButton from "../../../../../reusecore/Button";
5+
6+
function SectionNav() {
7+
const location = useLocation();
8+
return (
9+
<div className="filterBtns">
10+
<TabButton
11+
className={
12+
location.pathname === "/projects/sistent/components/select"
13+
? "active"
14+
: ""
15+
}
16+
onClick={() => navigate("/projects/sistent/components/select")}
17+
title="Overview"
18+
/>
19+
<TabButton
20+
className={
21+
location.pathname === "/projects/sistent/components/select/guidance"
22+
? "active"
23+
: ""
24+
}
25+
onClick={() => navigate("/projects/sistent/components/select/guidance")}
26+
title="Guidance"
27+
/>
28+
<TabButton
29+
className={
30+
location.pathname === "/projects/sistent/components/select/code"
31+
? "active"
32+
: ""
33+
}
34+
onClick={() => navigate("/projects/sistent/components/select/code")}
35+
title="Code"
36+
/>
37+
</div>
38+
);
39+
}
40+
export default SectionNav;

0 commit comments

Comments
 (0)