You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.0 KiB
45 lines
1.0 KiB
import React, {useCallback, useEffect, useMemo} from "react";
|
|
import "./Layout.sass";
|
|
|
|
interface TabsProps {
|
|
tabNames: string[]
|
|
index: number
|
|
onChange: (newIndex: number) => void
|
|
boldIndex?: number
|
|
}
|
|
|
|
export function Tabs({tabNames, index, onChange, boldIndex}: TabsProps) {
|
|
useEffect(() => {
|
|
if (index < 0) {
|
|
onChange(0);
|
|
} else if (tabNames.length > 0 && index >= tabNames.length) {
|
|
onChange(tabNames.length - 1);
|
|
}
|
|
}, [tabNames, index, onChange]);
|
|
|
|
const tabClass = useCallback((i: number) => {
|
|
const classes = ['Tabs-element'];
|
|
|
|
if (i === index) {
|
|
classes.push("Tabs-active");
|
|
}
|
|
|
|
if (i === boldIndex) {
|
|
classes.push("Tabs-bold");
|
|
}
|
|
|
|
return classes.join(" ");
|
|
}, [index, boldIndex])
|
|
|
|
return (
|
|
<div className="Tabs-container">
|
|
{tabNames.map((name, i) => (
|
|
<div className={tabClass(i)}
|
|
onClick={() => onChange(i)}
|
|
>
|
|
{name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|