56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { RadioGroup } from '@headlessui/react'
|
|
import clsx from 'clsx'
|
|
import React from 'react'
|
|
|
|
export function ChoicesToggleGroup(props: {
|
|
currentChoice: number | string
|
|
choicesMap: { [key: string]: string | number }
|
|
isSubmitting?: boolean
|
|
setChoice: (p: number | string) => void
|
|
className?: string
|
|
toggleClassName?: string
|
|
children?: React.ReactNode
|
|
}) {
|
|
const {
|
|
currentChoice,
|
|
setChoice,
|
|
isSubmitting,
|
|
choicesMap,
|
|
className,
|
|
children,
|
|
toggleClassName,
|
|
} = props
|
|
return (
|
|
<RadioGroup
|
|
className={clsx(
|
|
className,
|
|
'flex flex-row flex-wrap items-center gap-2 sm:gap-3'
|
|
)}
|
|
value={currentChoice.toString()}
|
|
onChange={setChoice}
|
|
>
|
|
{Object.keys(choicesMap).map((choiceKey) => (
|
|
<RadioGroup.Option
|
|
key={choiceKey}
|
|
value={choicesMap[choiceKey]}
|
|
className={({ active }) =>
|
|
clsx(
|
|
active ? 'ring-2 ring-indigo-500 ring-offset-2' : '',
|
|
currentChoice === choicesMap[choiceKey]
|
|
? 'border-transparent bg-indigo-500 text-white hover:bg-indigo-600'
|
|
: 'border-gray-200 bg-white text-gray-900 hover:bg-gray-50',
|
|
'flex cursor-pointer items-center justify-center rounded-md border py-3 px-3 text-sm font-medium normal-case',
|
|
"hover:ring-offset-2' hover:ring-2 hover:ring-indigo-500",
|
|
toggleClassName
|
|
)
|
|
}
|
|
disabled={isSubmitting}
|
|
>
|
|
<RadioGroup.Label as="span">{choiceKey}</RadioGroup.Label>
|
|
</RadioGroup.Option>
|
|
))}
|
|
{children}
|
|
</RadioGroup>
|
|
)
|
|
}
|