Toggle Group

import React from 'react'
import { ToggleGroup, ToggleGroupItem } from '@immit/ui/toggle-group'
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react'
 
export function ToggleGroupDemo() {
  return (
    <ToggleGroup
      type="single"
      defaultValue="center"
      aria-label="Text alignment"
    >
      <ToggleGroupItem variant="outline" value="left" aria-label="Left aligned">
        <AlignLeft size={16} />
      </ToggleGroupItem>
      <ToggleGroupItem
        variant="outline"
        value="center"
        aria-label="Center aligned"
      >
        <AlignCenter size={16} />
      </ToggleGroupItem>
      <ToggleGroupItem
        variant="outline"
        value="right"
        aria-label="Right aligned"
      >
        <AlignRight size={16} />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}