43 lines
910 B
TypeScript
43 lines
910 B
TypeScript
import "./Tabs.css";
|
|
import useHorizontalScroll from "Hooks/useHorizontalScroll";
|
|
|
|
export interface Tab {
|
|
text: string;
|
|
value: number;
|
|
disabled?: boolean;
|
|
data?: string;
|
|
}
|
|
|
|
interface TabsProps {
|
|
tabs: Tab[];
|
|
tab: Tab;
|
|
setTab: (t: Tab) => void;
|
|
}
|
|
|
|
interface TabElementProps extends Omit<TabsProps, "tabs"> {
|
|
t: Tab;
|
|
}
|
|
|
|
export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
|
|
return (
|
|
<div
|
|
className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`}
|
|
onClick={() => !t.disabled && setTab(t)}>
|
|
{t.text}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Tabs = ({ tabs, tab, setTab }: TabsProps) => {
|
|
const horizontalScroll = useHorizontalScroll();
|
|
return (
|
|
<div className="tabs" ref={horizontalScroll}>
|
|
{tabs.map(t => (
|
|
<TabElement key={t.value} tab={tab} setTab={setTab} t={t} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Tabs;
|