31 lines
806 B
TypeScript
31 lines
806 B
TypeScript
import cx from 'clsx';
|
|
import { isEqual } from 'lodash-es';
|
|
import { useCallback, useState } from 'react';
|
|
import styles from './Tab.module.css';
|
|
|
|
type TabProps = {
|
|
tabs: { title: string; id: unknown }[];
|
|
onActive?: (id: unknown) => void;
|
|
};
|
|
|
|
export function Tab({ tabs = [], onActive }: TabProps) {
|
|
const [active, setActive] = useState(0);
|
|
const handleActivate = useCallback((index: number) => {
|
|
setActive(index);
|
|
onActive?.(tabs[index].id);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.tabs_container}>
|
|
{tabs.map((tab, index) => (
|
|
<div
|
|
key={`tab_${index}_${tab.id}`}
|
|
className={cx(styles.tab, isEqual(index, active) && styles.actived)}
|
|
onClick={() => handleActivate(index)}>
|
|
{tab.title}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|