Actualizado y reparado

src/pages/App.tsx

@@ -4,9 +4,22 @@ import { Label } from '../components/ui/label';
 import { Input } from '../components/ui/input';
 import { NavLink } from 'react-router';
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+
 function App() {
   return (
-    <div className="w-full grow bg-gradient-to-br from-gray-100 to-gray-300/20 shadow-xl shadow-gray-400/10 flex flex-col items-center justify-center p-5 gap-20 rounded-lg backdrop-blur-lg">
+    <div className="w-full grow bg-gradient-to-br from-gray-100/50 to-gray-300/15 shadow-xl shadow-gray-400/10 flex flex-col items-center justify-center p-5 gap-20 rounded-lg backdrop-blur-sm">
       <Card className="w-fit">
         <CardHeader>
           <CardTitle className='font-display'>Crear nuevo proyecto</CardTitle>
@@ -29,18 +42,27 @@ function App() {
               </div>
             </div>
           </form>
-
         </CardContent>
         <CardFooter className="flex justify-between">
-          <NavLink to="/login" end>
 
-            <Button
-              variant="outline"
-              className="px-6 py-3 text-gray-700 border border-gray-300 rounded-lg shadow-md shadow-gray-300/50 bg-white transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:shadow-sm"
-            >
-              Cancelar
-            </Button>
-          </NavLink>
+
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="outline">Cancelar</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle className="font-display">¿Deseas cancelar el modelo?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Esta acción es irreversible. Se borrará todo el progreso realizado y no habrá respaldo para recuperarlo.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction className="font-display">Confirmar</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
           <Button className="font-display px-6 py-3 text-lg font-bold text-white bg-gradient-to-b from-blue-500 to-blue-700 rounded-lg shadow-lg shadow-blue-500/50 transform transition-all duration-300 hover:shadow-xl hover:scale-105 active:translate-y-1 active:shadow-md cursor-pointer">
             Presentar
           </Button>

src/pages/Previewer.tsx

@@ -0,0 +1,36 @@
+import { Canvas } from "@react-three/fiber";
+import { useGLTF, useAnimations, Environment, Loader } from "@react-three/drei";
+import { Suspense, useEffect } from "react";
+
+function Model({ url }: { url: string }) {
+  const { scene, animations } = useGLTF(url);
+  const { actions } = useAnimations(animations, scene);
+
+  useEffect(() => {
+    if (actions && animations.length > 0) {
+      actions[animations[0].name]?.play(); // Play the first animation if available
+    }
+  }, [actions, animations]);
+
+  return <primitive object={scene} scale={0.01} position={[0, -2, 0]} rotation={[0, -3 * Math.PI / 5, 0]} />;
+}
+
+// Preload the model for smoother loading
+useGLTF.preload("/models/sample.glb");
+
+// Main 3D Viewer
+export default function Previewer({ modelUrl }: { modelUrl: string }) {
+  return (
+    <div className="grow w-full bg-white/10 shadow-xl shadow-gray-300/25 rounded-lg p-6 backdrop-blur-lg">
+      <div className="w-full h-100 grow">
+        <Suspense fallback={<Loader />}>
+          <Canvas
+            camera={{ position: [0, 0, 12], fov: 20 }}>
+            <Environment preset="city" />
+            <Model url={modelUrl} />
+          </Canvas>
+        </Suspense>
+      </div>
+    </div>
+  );
+}