Changes

2026-02-27 00:55:33 +00:00
parent f6023e3cb3
commit 96e316aa8e
5 changed files with 308 additions and 24 deletions
@@ -0,0 +1,43 @@
+import { Eye, Grid3X3 } from 'lucide-react';
+import { Slider } from '@/components/ui/slider';
+import { Button } from '@/components/ui/button';
+import { useModelStore } from '@/stores/useModelStore';
+
+export function ViewerControls() {
+  const { opacity, setOpacity, renderMode, setRenderMode } = useModelStore();
+
+  return (
+    <div className="absolute bottom-4 left-4 z-10 flex items-end gap-3">
+      {/* Opacity slider */}
+      <div className="rounded-lg border bg-card/90 backdrop-blur-sm p-3 shadow-lg w-56">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Eye className="h-3.5 w-3.5 text-primary" />
+            <span className="font-mono text-xs text-muted-foreground">Opacidade</span>
+          </div>
+          <span className="font-mono text-xs text-foreground">{Math.round(opacity * 100)}%</span>
+        </div>
+        <Slider
+          value={[opacity * 100]}
+          min={0}
+          max={100}
+          step={1}
+          onValueChange={([v]) => setOpacity(v / 100)}
+        />
+      </div>
+
+      {/* Render mode toggle */}
+      <Button
+        variant={renderMode === 'wireframe' ? 'default' : 'outline'}
+        size="sm"
+        className="gap-2 h-9"
+        onClick={() => setRenderMode(renderMode === 'solid' ? 'wireframe' : 'solid')}
+      >
+        <Grid3X3 className="h-3.5 w-3.5" />
+        <span className="font-mono text-xs">
+          {renderMode === 'wireframe' ? 'Wireframe' : 'Sólido'}
+        </span>
+      </Button>
+    </div>
+  );
+}