Toggle Group

import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, ItalicIcon, StrikethroughIcon } from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

// Text alignment is one of four; styles can be combined (multiple).
export default function ToggleGroupDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <ToggleGroup variant="outline" spacing={0} defaultValue={["left"]} aria-label="Alignment">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeftIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Center">
          <AlignCenterIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRightIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="justify" aria-label="Justify">
          <AlignJustifyIcon />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup multiple defaultValue={["bold"]} aria-label="Style">
        <ToggleGroupItem value="bold" aria-label="Bold">
          <BoldIcon strokeWidth={2.5} />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Italic">
          <ItalicIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="strike" aria-label="Strikethrough">
          <StrikethroughIcon />
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}