import React, {PropsWithChildren, useCallback, useEffect} from "react"; import ReactModal from "react-modal"; import "./Layout.sass"; import {LuciferIcon} from "../models/Icons"; import {IconBlock} from "./Elements"; interface TabsProps { tabNames: string[] index: number onChange: (newIndex: number) => void boldIndex?: number large?: boolean } export function Tabs({tabNames, index, onChange, large, 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 (