55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { FunctionComponent } from 'react'
|
|
|
|
interface ButtonGroupProps {
|
|
activeValue: string
|
|
onChange: (x) => void
|
|
unit?: string
|
|
values: Array<string>
|
|
}
|
|
|
|
const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
|
|
activeValue,
|
|
unit,
|
|
values,
|
|
onChange,
|
|
}) => {
|
|
return (
|
|
<div className="bg-th-bkg-3 rounded-md">
|
|
<div className="flex relative">
|
|
{activeValue ? (
|
|
<div
|
|
className={`absolute bg-th-bkg-4 default-transition h-full left-0 top-0 rounded-md transform`}
|
|
style={{
|
|
transform: `translateX(${
|
|
values.findIndex((v) => v === activeValue) * 100
|
|
}%)`,
|
|
width: `${100 / values.length}%`,
|
|
}}
|
|
/>
|
|
) : null}
|
|
{values.map((v, i) => (
|
|
<button
|
|
className={`cursor-pointer default-transition font-normal px-2 py-1.5 relative rounded-md text-center text-xs w-1/2
|
|
${
|
|
v === activeValue
|
|
? `text-th-primary`
|
|
: `text-th-fgd-1 opacity-70 hover:opacity-100`
|
|
}
|
|
`}
|
|
key={`${v}${i}`}
|
|
onClick={() => onChange(v)}
|
|
style={{
|
|
width: `${100 / values.length}%`,
|
|
}}
|
|
>
|
|
{v}
|
|
{unit}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ButtonGroup
|