39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { useTranslation } from 'next-i18next'
|
|
|
|
const SwipeableTabs = ({ onChange, tabs, tabIndex }) => {
|
|
const { t } = useTranslation('common')
|
|
|
|
return (
|
|
<div className={`border-b border-th-fgd-4 mb-4 relative`}>
|
|
<div
|
|
className={`absolute bg-th-primary bottom-[-1px] default-transition left-0 h-0.5`}
|
|
style={{
|
|
maxWidth: '176px',
|
|
transform: `translateX(${tabIndex * 100}%)`,
|
|
width: `${100 / tabs.length}%`,
|
|
}}
|
|
/>
|
|
<nav className="-mb-px flex" aria-label="Tabs">
|
|
{tabs.map((tabName, i) => (
|
|
<a
|
|
key={tabName}
|
|
onClick={() => onChange(i)}
|
|
className={`cursor-pointer default-transition flex font-semibold justify-center pb-4 pt-2 relative whitespace-nowrap hover:opacity-100
|
|
${
|
|
tabIndex === i
|
|
? `text-th-primary`
|
|
: `text-th-fgd-4 hover:text-th-primary`
|
|
}
|
|
`}
|
|
style={{ width: `${100 / tabs.length}%`, maxWidth: '176px' }}
|
|
>
|
|
{t(tabName.toLowerCase().replace(' ', '-'))}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SwipeableTabs
|