Changes

2026-02-27 00:41:06 +00:00
parent dc6b44fef9
commit 1cc84fb1f1
10 changed files with 3183 additions and 112 deletions
@@ -0,0 +1,100 @@
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, Glasses, Box, Ruler, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useModelStore } from '@/stores/useModelStore';
+import { ModelViewerCanvas } from '@/components/three/ModelViewer';
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+const Viewer = () => {
+  const navigate = useNavigate();
+  const { model, xrSupported } = useModelStore();
+
+  useEffect(() => {
+    if (!model) {
+      navigate('/');
+    }
+  }, [model, navigate]);
+
+  if (!model) return null;
+
+  const handleEnterXR = async () => {
+    if (!xrSupported) {
+      toast.error('WebXR não é suportado neste navegador. Use o navegador do Meta Quest 3.');
+      return;
+    }
+    navigate('/xr');
+  };
+
+  return (
+    <div className="flex h-screen flex-col bg-background">
+      {/* Top bar */}
+      <header className="flex items-center justify-between border-b bg-card px-4 py-3">
+        <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={() => navigate('/')}>
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <div className="flex items-center gap-2">
+            <Box className="h-5 w-5 text-primary" />
+            <h1 className="font-mono text-sm font-semibold text-foreground">
+              TrackkSteel<span className="text-primary">XR</span>
+            </h1>
+          </div>
+        </div>
+
+        <Button
+          className="gap-2 glow-primary"
+          disabled={!xrSupported}
+          onClick={handleEnterXR}
+        >
+          <Glasses className="h-4 w-4" />
+          Entrar em Modo XR
+        </Button>
+      </header>
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* 3D Canvas */}
+        <div className="flex-1">
+          <ModelViewerCanvas url={model.url} />
+        </div>
+
+        {/* Side panel */}
+        <aside className="w-72 shrink-0 overflow-y-auto border-l bg-card p-4">
+          <h2 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+            Informações do Modelo
+          </h2>
+
+          <div className="space-y-4">
+            <InfoItem icon={FileText} label="Arquivo" value={model.fileName} />
+            <InfoItem
+              icon={Box}
+              label="Tamanho"
+              value={`${(model.fileSize / (1024 * 1024)).toFixed(2)} MB`}
+            />
+            <InfoItem icon={Ruler} label="Escala" value="1:1 (mm)" />
+
+            <div className="rounded-lg border bg-muted/50 p-3">
+              <p className="font-mono text-xs text-muted-foreground">
+                Use o mouse para orbitar, scroll para zoom. No Quest 3, use o botão acima para entrar em modo imersivo com passthrough.
+              </p>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+};
+
+function InfoItem({ icon: Icon, label, value }: { icon: any; label: string; value: string }) {
+  return (
+    <div className="flex items-start gap-3">
+      <Icon className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+      <div className="min-w-0">
+        <p className="text-xs text-muted-foreground">{label}</p>
+        <p className="truncate font-mono text-sm text-foreground">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+export default Viewer;