40 lines
778 B
TypeScript
40 lines
778 B
TypeScript
import './Tabs.css'
|
|
|
|
export interface Tab {
|
|
text: string, value: number
|
|
}
|
|
|
|
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" : ""}`} onClick={() => setTab(t)}>
|
|
{t.text}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Tabs = ({ tabs, tab, setTab }: TabsProps) => {
|
|
return (
|
|
<div className="tabs">
|
|
{tabs.map((t) => {
|
|
return (
|
|
<div key={t.value} className={`tab ${tab.value === t.value ? "active" : ""}`} onClick={() => setTab(t)}>
|
|
{t.text}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Tabs
|