import { ChevronDownIcon } from "@heroicons/react/solid"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; import React from "react"; import classNames from "@lib/classNames"; import { useLocale } from "@lib/hooks/useLocale"; import { RadioArea, RadioAreaGroup } from "@components/ui/form/radio-area/RadioAreaGroup"; type OptionProps = React.OptionHTMLAttributes<HTMLOptionElement> & { description?: string; }; type RadioAreaSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & { options: OptionProps[]; // allow options to be passed programmatically, like options={} }; export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) { const { t } = useLocale(); const { options, disabled = !options.length, // if not explicitly disabled and the options length is empty, disable anyway placeholder = t("select"), } = props; const getLabel = (value: string | ReadonlyArray<string> | number) => options.find((option: OptionProps) => option.value === value)?.label; return ( <Collapsible className={classNames("w-full", props.className)}> <CollapsibleTrigger type="button" disabled={disabled} className={classNames( "mb-1 cursor-pointer focus:ring-primary-500 text-left border border-1 bg-white p-2 shadow-sm block w-full sm:text-sm border-gray-300 rounded-sm", disabled && "focus:ring-0 cursor-default bg-gray-200 " )}> {getLabel(props.value) ?? placeholder} <ChevronDownIcon className="float-right h-5 w-5 text-neutral-500" /> </CollapsibleTrigger> <CollapsibleContent> <RadioAreaGroup className="space-y-2 text-sm" name={props.name} onChange={props.onChange}> {options.map((option) => ( <RadioArea {...option} key={option.value} defaultChecked={props.value === option.value}> <strong className="block mb-1">{option.label}</strong> <p>{option.description}</p> </RadioArea> ))} </RadioAreaGroup> </CollapsibleContent> </Collapsible> ); }; export default Select;