gpt-engineer-app[bot]
44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|