Function ToggleGroup

common/components/toggle-group.tsx:27–62

(props: Props)

}

export default function ToggleGroup(props: Props) {
  const { value, onChange, responsive = true, options } = props

  const isMobile = useMobile()
  if (isMobile && responsive) {
    return (
      <Select value={value} onValueChange={onChange}>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          {options.map(option => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    )
  }

  return (
    <_ToggleGroup
      type="single"
      variant="outline"
      value={value}
      onValueChange={onChange}
    >
      {options.map(option => (
        <ToggleGroupItem key={option.value} value={option.value}>
          {option.label}
        </ToggleGroupItem>
      ))}
    </_ToggleGroup>
  )
}