import { ChevronDownIcon } from "@heroicons/react/solid"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"; import React from "react"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RadioArea, RadioAreaGroup } from "@calcom/ui/v2/form/radio-area/RadioAreaGroup"; interface OptionProps extends Pick, "value" | "label" | "className"> { description?: string; } interface RadioAreaSelectProps extends Omit, "onChange"> { options: OptionProps[]; // allow options to be passed programmatically, like options={} onChange?: (value: string) => void; } 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 | number | undefined) => options.find((option: OptionProps) => option.value === value)?.label; return ( {getLabel(props.value) ?? placeholder} {options.map((option) => ( {option.label}

{option.description}

))}
); }; export default Select;