// title: Rich text editor toolbar with formatting and alignment controls "use client"; import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, ItalicIcon, ListIcon, ListOrderedIcon, RedoIcon, StrikethroughIcon, UnderlineIcon, UndoIcon, } from "lucide-react"; import { Button } from "@/registry/default/ui/button"; import { ToggleGroup, ToggleGroupItem, } from "@/registry/default/ui/toggle-group"; import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "@/registry/default/ui/toolbar"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; const formatTools = [ { icon: BoldIcon, label: "Bold", shortcut: "⌘B" }, { icon: ItalicIcon, label: "Italic", shortcut: "⌘I" }, { icon: UnderlineIcon, label: "Underline", shortcut: "⌘U" }, { icon: StrikethroughIcon, label: "Strikethrough", shortcut: "⌘⇧X" }, ] as const; const alignTools = [ { icon: AlignLeftIcon, label: "Align left", value: "left" }, { icon: AlignCenterIcon, label: "Align center", value: "center" }, { icon: AlignRightIcon, label: "Align right", value: "right" }, { icon: AlignJustifyIcon, label: "Justify", value: "justify" }, ] as const; const listTools = [ { icon: ListIcon, label: "Bullet list" }, { icon: ListOrderedIcon, label: "Numbered list" }, ] as const; export function Pattern() { return ( }> } /> Undo (⌘Z) }> } /> Redo (⌘⇧Z) {formatTools.map(({ icon: Icon, label, shortcut }) => ( } > } /> {label} {shortcut} ))} {alignTools.map(({ icon: Icon, label, value }) => ( } > } /> {label} ))} {listTools.map(({ icon: Icon, label }) => ( } > } /> {label} ))} ); }