// Plaaayground v2 — ZoomControls
// Blueprint: 06 — Zoom button group: − % + ⛶

import { Minus, Plus, Maximize2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ZoomControlsProps {
  zoom: number;
  onZoomChange: (zoom: number) => void;
  min?: number;
  max?: number;
  step?: number;
  onFitToScreen?: () => void;
  className?: string;
}

export function ZoomControls({
  zoom,
  onZoomChange,
  min = 25,
  max = 200,
  step = 10,
  onFitToScreen,
  className,
}: ZoomControlsProps) {
  function zoomIn() {
    onZoomChange(Math.min(zoom + step, max));
  }

  function zoomOut() {
    onZoomChange(Math.max(zoom - step, min));
  }

  return (
    <div
      className={cn(
        "inline-flex items-center bg-card border border-border",
        className
      )}
    >
      <button
        onClick={zoomOut}
        disabled={zoom <= min}
        className="flex items-center justify-center w-8 h-8 hover:bg-secondary transition-colors disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
        aria-label="Zoom out"
      >
        <Minus className="w-3.5 h-3.5" />
      </button>
      <div className="flex items-center justify-center min-w-[3rem] h-8 border-x border-border text-sm font-mono text-muted-foreground tabular-nums">
        {zoom}%
      </div>
      <button
        onClick={zoomIn}
        disabled={zoom >= max}
        className="flex items-center justify-center w-8 h-8 hover:bg-secondary transition-colors disabled:opacity-30 cursor-pointer disabled:cursor-not-allowed"
        aria-label="Zoom in"
      >
        <Plus className="w-3.5 h-3.5" />
      </button>
      {onFitToScreen && (
        <>
          <div className="w-px h-4 bg-border" />
          <button
            onClick={onFitToScreen}
            className="flex items-center justify-center w-8 h-8 hover:bg-secondary transition-colors cursor-pointer"
            aria-label="Fit to screen"
          >
            <Maximize2 className="w-3.5 h-3.5" />
          </button>
        </>
      )}
    </div>
  );
}
ZoomControls

Source Code
