39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
'use client'
|
|
import {FormLabel} from '@/components/ui/form'
|
|
import {merge} from '@/lib/utils'
|
|
import {RadioGroupItem} from '@/components/ui/radio-group'
|
|
import {ReactNode} from 'react'
|
|
|
|
export type FormOptionProps = {
|
|
id: string
|
|
value: string
|
|
label?: string
|
|
description?: string
|
|
compare: string
|
|
className?: string
|
|
children?: ReactNode
|
|
}
|
|
|
|
export default function FormOption(props: FormOptionProps) {
|
|
return (
|
|
<>
|
|
<FormLabel
|
|
htmlFor={props.id}
|
|
className={merge(
|
|
`transition-colors duration-150 ease-in-out`,
|
|
`px-6 py-4 border rounded-md flex flex-col gap-2 cursor-pointer`,
|
|
props.compare === props.value ? `bg-primary/10 border-primary` : `border-gray-200`,
|
|
props.className,
|
|
)}>
|
|
{props.children ? props.children : (
|
|
<>
|
|
<span>{props.label}</span>
|
|
{props.description && <p className="text-sm text-gray-500">{props.description}</p>}
|
|
</>
|
|
)}
|
|
</FormLabel>
|
|
<RadioGroupItem id={props.id} value={props.value} className="hidden"/>
|
|
</>
|
|
)
|
|
}
|