Research-Stack/5-Applications/text-to-cad/viewer/components/workbench/DrawingToolbar.js

import { Redo2, Trash2, Undo2 } from "lucide-react";
import { cn } from "../../lib/cn";
import { TooltipProvider } from "../ui/tooltip";
import ToolbarShell from "./ToolbarShell";
import { ToolbarButton } from "./ToolbarButton";

export default function DrawingToolbar({
  className,
  layout = "wrap",
  drawingToolOptions,
  drawingTool,
  handleSelectDrawingTool,
  handleUndoDrawing,
  handleRedoDrawing,
  handleClearDrawings,
  canUndoDrawing,
  canRedoDrawing,
  drawingStrokes
}) {
  const historyUndo = handleUndoDrawing;
  const historyRedo = handleRedoDrawing;
  const clearAction = handleClearDrawings;
  const canUndo = canUndoDrawing;
  const canRedo = canRedoDrawing;
  const actionCount = drawingStrokes.length;
  const scrollLayout = layout === "scroll";

  return (
    <ToolbarShell className={cn("p-1.5", className)}>
      <TooltipProvider delayDuration={250}>
        <div
          className={cn(
            "flex gap-1",
            scrollLayout
              ? "flex-nowrap overflow-x-auto overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
              : "flex-wrap"
          )}
        >
          {drawingToolOptions.map(({ id, label, Icon }) => {
            const active = drawingTool === id;
            return (
              <ToolbarButton
                key={id}
                label={label}
                active={active}
                aria-pressed={active}
                onClick={() => handleSelectDrawingTool(id)}
              >
                <Icon className="size-3.5" strokeWidth={2} aria-hidden="true" />
              </ToolbarButton>
            );
          })}

          <ToolbarButton
            label="Undo"
            onClick={historyUndo}
            disabled={!canUndo}
          >
            <Undo2 className="size-3.5" strokeWidth={2} aria-hidden="true" />
          </ToolbarButton>

          <ToolbarButton
            label="Redo"
            onClick={historyRedo}
            disabled={!canRedo}
          >
            <Redo2 className="size-3.5" strokeWidth={2} aria-hidden="true" />
          </ToolbarButton>

          <ToolbarButton
            label="Clear all"
            onClick={clearAction}
            disabled={!actionCount}
          >
            <Trash2 className="size-3.5" strokeWidth={2} aria-hidden="true" />
          </ToolbarButton>
        </div>
      </TooltipProvider>
    </ToolbarShell>
  );
}