@@ -21,12 +21,46 @@ const SistentSelect = () => {
2121 let agesList = event . target . value ;
2222 setMultipleAges ( agesList ) ;
2323 } ;
24+ const location = useLocation ( ) ;
2425
2526 return (
2627 < SistentLayout title = "Select" >
2728 < div className = "content" >
28- < Header />
29- < SectionNav />
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 >
3064 < div className = "main-content" >
3165 < p >
3266 The Select component is a versatile and customizable element
@@ -224,52 +258,5 @@ const SistentSelect = () => {
224258 ) ;
225259} ;
226260
227- export function SectionNav ( ) {
228- const location = useLocation ( ) ;
229- return (
230- < div className = "filterBtns" >
231- < TabButton
232- className = {
233- location . pathname === "/projects/sistent/components/select"
234- ? "active"
235- : ""
236- }
237- onClick = { ( ) => navigate ( "/projects/sistent/components/select" ) }
238- title = "Overview"
239- />
240- < TabButton
241- className = {
242- location . pathname === "/projects/sistent/components/select/guidance"
243- ? "active"
244- : ""
245- }
246- onClick = { ( ) => navigate ( "/projects/sistent/components/select/guidance" ) }
247- title = "Guidance"
248- />
249- < TabButton
250- className = {
251- location . pathname === "/projects/sistent/components/select/code"
252- ? "active"
253- : ""
254- }
255- onClick = { ( ) => navigate ( "/projects/sistent/components/select/code" ) }
256- title = "Code"
257- />
258- </ div >
259- ) ;
260- }
261-
262- export function Header ( ) {
263- return (
264- < >
265- < a id = "Identity" >
266- < h2 > Select</ h2 >
267- </ a >
268- < p >
269- Select component is a dropdown menu for selecting an option from a list.
270- </ p >
271- </ >
272- ) ;
273- }
274261
275262export default SistentSelect ;
0 commit comments