49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { useTranslation } from 'next-i18next'
|
|
import { FunctionComponent } from 'react'
|
|
|
|
interface TabButtonsProps {
|
|
activeValue: string
|
|
onChange: (x: string) => void
|
|
values: Array<any>
|
|
showBorders?: boolean
|
|
rounded?: boolean
|
|
}
|
|
|
|
const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|
activeValue,
|
|
values,
|
|
onChange,
|
|
showBorders = false,
|
|
rounded = false,
|
|
}) => {
|
|
const { t } = useTranslation(['common', 'swap'])
|
|
|
|
return (
|
|
<div
|
|
className={`flex bg-th-bkg-1 text-th-fgd-4 ${
|
|
showBorders ? 'border-b border-th-bkg-3' : ''
|
|
}`}
|
|
>
|
|
{values.map((v, i) => (
|
|
<div key={v + i}>
|
|
<button
|
|
className={`default-transition h-12 px-6 font-bold ${
|
|
rounded ? 'rounded-md' : 'rounded-none'
|
|
} ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
|
|
v === activeValue
|
|
? 'bg-th-bkg-2 text-th-primary'
|
|
: 'hover:cursor-pointer hover:text-th-fgd-2'
|
|
}`}
|
|
key={`${v}${i}`}
|
|
onClick={() => onChange(v)}
|
|
>
|
|
{t(v)}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TabButtons
|