Total Complexity | 1 |
Complexity/F | 0 |
Lines of Code | 39 |
Function Count | 0 |
Duplicated Lines | 0 |
Ratio | 0 % |
Changes | 0 |
1 | import clsx from 'clsx' |
||
2 | import { useTranslation } from 'react-i18next' |
||
3 | |||
4 | import styles from './Tabs.module.scss' |
||
5 | |||
6 | interface IProps { |
||
7 | tabNames: string[] |
||
8 | activeTab: string |
||
9 | callback(arg: string): void |
||
10 | } |
||
11 | |||
12 | const Tabs = ({ tabNames, activeTab, callback }: IProps) => { |
||
|
|||
13 | const { t } = useTranslation() |
||
14 | |||
15 | return ( |
||
16 | <div className={styles.tabs}> |
||
17 | {tabNames?.map(tab => ( |
||
18 | <button |
||
19 | key={tab} |
||
20 | className={styles.tabItem} |
||
21 | onClick={() => callback(tab)} |
||
22 | > |
||
23 | <div |
||
24 | className={clsx( |
||
25 | styles.tabTitle, |
||
26 | tab === activeTab && styles.tabActive, |
||
27 | )} |
||
28 | data-text={t(tab)} |
||
29 | > |
||
30 | <span>{t(tab)}</span> |
||
31 | </div> |
||
32 | </button> |
||
33 | ))} |
||
34 | </div> |
||
35 | ) |
||
36 | } |
||
37 | |||
38 | export { Tabs } |
||
39 |