2022-08-10 04:17:10 -07:00
|
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import { FunctionComponent } from 'react'
|
|
|
|
|
|
|
|
interface TabButtonsProps {
|
|
|
|
activeValue: string
|
2022-09-21 22:28:53 -07:00
|
|
|
onChange: (x: any) => void
|
2022-09-28 13:02:12 -07:00
|
|
|
values: [string, number][]
|
2022-09-14 23:06:23 -07:00
|
|
|
showBorders?: boolean
|
|
|
|
rounded?: boolean
|
2022-09-21 22:28:53 -07:00
|
|
|
fillWidth?: boolean
|
2022-08-10 04:17:10 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
const TabButtons: FunctionComponent<TabButtonsProps> = ({
|
|
|
|
activeValue,
|
|
|
|
values,
|
|
|
|
onChange,
|
2022-09-14 23:06:23 -07:00
|
|
|
showBorders = false,
|
|
|
|
rounded = false,
|
2022-09-21 22:28:53 -07:00
|
|
|
fillWidth = false,
|
2022-08-10 04:17:10 -07:00
|
|
|
}) => {
|
2022-12-06 03:58:22 -08:00
|
|
|
const { t } = useTranslation(['common', 'swap', 'token', 'trade'])
|
2022-08-10 04:17:10 -07:00
|
|
|
|
|
|
|
return (
|
2022-09-14 23:06:23 -07:00
|
|
|
<div
|
|
|
|
className={`flex bg-th-bkg-1 text-th-fgd-4 ${
|
2022-09-16 03:49:10 -07:00
|
|
|
showBorders ? 'border-b border-th-bkg-3' : ''
|
2022-09-14 23:06:23 -07:00
|
|
|
}`}
|
|
|
|
>
|
2022-09-28 13:02:12 -07:00
|
|
|
{values.map(([label, count], i) => (
|
|
|
|
<div className={fillWidth ? 'flex-1' : ''} key={label + i}>
|
2022-08-10 04:17:10 -07:00
|
|
|
<button
|
2022-10-22 05:14:25 -07:00
|
|
|
className={`default-transition flex h-12 w-full items-center justify-center px-4 font-normal md:px-6 ${
|
2022-09-16 03:49:10 -07:00
|
|
|
rounded ? 'rounded-md' : 'rounded-none'
|
2022-11-14 02:18:38 -08:00
|
|
|
} ${
|
|
|
|
showBorders
|
|
|
|
? `border-r border-th-bkg-3 ${
|
|
|
|
fillWidth && i === values.length - 1 ? 'border-r-0' : ''
|
|
|
|
}`
|
|
|
|
: ''
|
|
|
|
} ${
|
2022-09-28 13:02:12 -07:00
|
|
|
label === activeValue
|
2022-11-30 19:32:32 -08:00
|
|
|
? 'bg-th-bkg-2 text-th-active'
|
2022-09-14 23:06:23 -07:00
|
|
|
: 'hover:cursor-pointer hover:text-th-fgd-2'
|
|
|
|
}`}
|
2022-09-28 13:02:12 -07:00
|
|
|
key={`${label}${i}`}
|
|
|
|
onClick={() => onChange(label)}
|
2022-08-10 04:17:10 -07:00
|
|
|
>
|
2022-12-12 17:50:10 -08:00
|
|
|
<span className="font-medium">{t(label)} </span>
|
2022-09-29 21:21:23 -07:00
|
|
|
{count ? (
|
|
|
|
<div
|
|
|
|
className={`ml-1.5 rounded ${
|
|
|
|
label === activeValue ? 'bg-th-bkg-4' : 'bg-th-bkg-3'
|
2022-10-02 22:42:28 -07:00
|
|
|
} px-1.5 font-mono text-xxs text-th-fgd-2`}
|
2022-09-29 21:21:23 -07:00
|
|
|
>
|
|
|
|
{count}
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-08-10 04:17:10 -07:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TabButtons
|