Changes

2026-02-27 02:16:40 +00:00
parent 6745b0ec64
commit de0565dac1
3 changed files with 166 additions and 11 deletions
@@ -0,0 +1,126 @@
+import { useRef } from 'react';
+import { ImagePlus, X, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useModelStore } from '@/stores/useModelStore';
+import { useState } from 'react';
+
+export function ComparePanel() {
+  const { compareImage, setCompareImage } = useModelStore();
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [zoom, setZoom] = useState(1);
+
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const url = URL.createObjectURL(file);
+    setCompareImage(url);
+    setZoom(1);
+  };
+
+  if (!compareImage) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-4 bg-muted/30 p-6">
+        <div className="rounded-xl border-2 border-dashed border-muted-foreground/30 p-8 text-center">
+          <ImagePlus className="mx-auto mb-3 h-10 w-10 text-muted-foreground/50" />
+          <p className="mb-1 font-mono text-sm font-semibold text-foreground">
+            Foto Real da Peça
+          </p>
+          <p className="mb-4 font-mono text-xs text-muted-foreground">
+            Carregue uma foto para comparar com o modelo 3D
+          </p>
+          <Button size="sm" className="gap-2" onClick={() => fileRef.current?.click()}>
+            <ImagePlus className="h-3.5 w-3.5" />
+            Selecionar Foto
+          </Button>
+        </div>
+        <input
+          ref={fileRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFile}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex h-full flex-col bg-muted/20">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between border-b bg-card/90 px-3 py-2 backdrop-blur-sm">
+        <span className="font-mono text-xs font-semibold text-muted-foreground uppercase tracking-widest">
+          Foto Real
+        </span>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => setZoom((z) => Math.max(0.25, z - 0.25))}
+            title="Zoom out"
+          >
+            <ZoomOut className="h-3.5 w-3.5" />
+          </Button>
+          <span className="font-mono text-xs text-muted-foreground w-10 text-center">
+            {Math.round(zoom * 100)}%
+          </span>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => setZoom((z) => Math.min(4, z + 0.25))}
+            title="Zoom in"
+          >
+            <ZoomIn className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => setZoom(1)}
+            title="Reset zoom"
+          >
+            <RotateCcw className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => fileRef.current?.click()}
+            title="Trocar foto"
+          >
+            <ImagePlus className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => { setCompareImage(null); setZoom(1); }}
+            title="Remover foto"
+          >
+            <X className="h-3.5 w-3.5 text-destructive" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Image */}
+      <div className="flex-1 overflow-auto flex items-center justify-center">
+        <img
+          src={compareImage}
+          alt="Foto real da peça"
+          className="max-w-none transition-transform duration-150"
+          style={{ transform: `scale(${zoom})` }}
+          draggable={false}
+        />
+      </div>
+
+      <input
+        ref={fileRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={handleFile}
+      />
+    </div>
+  );
+}