Keyboard Shortcut Toolbar

import {
  AlignCenterIcon,
  AlignJustifyIcon,
  AlignLeftIcon,
  AlignRightIcon,
  BoldIcon,
  ItalicIcon,
  StrikethroughIcon,
  UnderlineIcon,
} from "lucide-react";
import { Button } from "@/components/ui/v-tooltip-7-utils/button";
import { Kbd } from "@/components/ui/v-tooltip-7-utils/kbd";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/v-tooltip-7-utils/tooltip";

const tools = [
  { icon: BoldIcon, label: "Bold", shortcut: ["⌘", "B"], open: true },
  { icon: ItalicIcon, label: "Italic", shortcut: ["⌘", "I"], open: false },
  {
    icon: UnderlineIcon,
    label: "Underline",
    shortcut: ["⌘", "U"],
    open: false,
  },
  {
    icon: StrikethroughIcon,
    label: "Strikethrough",
    shortcut: ["⌘", "⇧", "X"],
    open: false,
  },
] as const;

const aligns = [
  { icon: AlignLeftIcon, label: "Align left", shortcut: ["⌘", "⇧", "L"] },
  { icon: AlignCenterIcon, label: "Align center", shortcut: ["⌘", "⇧", "E"] },
  { icon: AlignRightIcon, label: "Align right", shortcut: ["⌘", "⇧", "R"] },
  { icon: AlignJustifyIcon, label: "Justify", shortcut: ["⌘", "⇧", "J"] },
] as const;

export default function Default() {
  return (
    <div className="flex min-h-52 w-full items-center justify-center p-6">
      <div className="flex items-center justify-center">
        <TooltipProvider>
          <div className="flex items-center gap-1 rounded-lg border bg-background p-1 shadow-sm">
            {tools.map(({ icon: Icon, label, shortcut, open }) => (
              <Tooltip key={label} defaultOpen={open}>
                <TooltipTrigger render={<Button size="icon" variant="ghost" />}>
                  <Icon aria-hidden="true" className="size-4" />
                  <span className="sr-only">{label}</span>
                </TooltipTrigger>
                <TooltipContent className="px-2.5 py-2">
                  <div className="flex items-center gap-3">
                    <span>{label}</span>
                    <span className="flex items-center gap-0.5">
                      {shortcut.map((k) => (
                        <Kbd key={k}>{k}</Kbd>
                      ))}
                    </span>
                  </div>
                </TooltipContent>
              </Tooltip>
            ))}
            <div className="mx-1 h-5 w-px bg-border" />
            {aligns.map(({ icon: Icon, label, shortcut }) => (
              <Tooltip key={label}>
                <TooltipTrigger render={<Button size="icon" variant="ghost" />}>
                  <Icon aria-hidden="true" className="size-4" />
                  <span className="sr-only">{label}</span>
                </TooltipTrigger>
                <TooltipContent className="px-2.5 py-2">
                  <div className="flex items-center gap-3">
                    <span>{label}</span>
                    <span className="flex items-center gap-0.5">
                      {shortcut.map((k) => (
                        <Kbd key={k}>{k}</Kbd>
                      ))}
                    </span>
                  </div>
                </TooltipContent>
              </Tooltip>
            ))}
          </div>
        </TooltipProvider>
      </div>
    </div>
  );
}