import { useState } from "react";import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";import { ToggleGroup, ToggleGroupItem } from "@/components/toggle-group";
export function ToggleGroupUsage() { const [align, setAlign] = useState(["left"]); return ( <ToggleGroup aria-label="Text alignment" variant="outline" size="icon" value={align} onValueChange={setAlign}> <ToggleGroupItem value="left" aria-label="Align left"> <AlignLeft className="size-5" aria-hidden /> </ToggleGroupItem> <ToggleGroupItem value="center" aria-label="Align center"> <AlignCenter className="size-5" aria-hidden /> </ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Align right"> <AlignRight className="size-5" aria-hidden /> </ToggleGroupItem> </ToggleGroup> );}