Toggle Button

import React from 'react'
import { ToggleButton, ToggleButtonGroup, Kanban } from '@otfdashkit/ui'

function ToggleButtonDemo() {
  const [single, setSingle] = React.useState('grid')
  const [multi, setMulti] = React.useState<string[]>(['bold'])
  return (
    <div className="space-y-4">
      <div>
        <p className="text-xs text-[hsl(var(--muted-foreground))] mb-2">Single select</p>
        <ToggleButtonGroup value={single} onChange={setSingle}>
          <ToggleButton value="grid">Grid</ToggleButton>
          <ToggleButton value="list">List</ToggleButton>
          <ToggleButton value="kanban">Kanban</ToggleButton>
        </ToggleButtonGroup>
      </div>
      <div>
        <p className="text-xs text-[hsl(var(--muted-foreground))] mb-2">Multiple select</p>
        <ToggleButtonGroup type="multiple" value={multi} onChange={setMulti}>
          <ToggleButton value="bold"><strong>B</strong></ToggleButton>
          <ToggleButton value="italic"><em>I</em></ToggleButton>
          <ToggleButton value="underline"><u>U</u></ToggleButton>
        </ToggleButtonGroup>
      </div>
    </div>
  )
}

export function Example() {
  return (
    <ToggleButtonDemo />
  )
}