77 lines
3.1 KiB
TypeScript
77 lines
3.1 KiB
TypeScript
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../components/ui/card';
|
|
import { Button } from '../components/ui/button';
|
|
import { Label } from '../components/ui/label';
|
|
import { Input } from '../components/ui/input';
|
|
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog"
|
|
import { useNavigate } from 'react-router';
|
|
|
|
|
|
function App() {
|
|
const navigate = useNavigate()
|
|
return (
|
|
<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>
|
|
<CardDescription>Presenta tus proyectos 3D y compártelos con tu profesor</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form>
|
|
<div className="grid w-full items-center gap-4">
|
|
<div className="flex flex-col space-y-1.5">
|
|
<Label htmlFor="name" className="border-l-4 border-red-500 pl-2 font-semibold">
|
|
Nombre del proyecto
|
|
</Label>
|
|
<Input id="name" placeholder="Soporte de Motor" />
|
|
</div>
|
|
<div className="flex flex-col space-y-1.5">
|
|
<Label htmlFor="model" className="border-l-4 border-red-500 pl-2 font-semibold">
|
|
Modelo 3D
|
|
</Label>
|
|
<Input id="model" type="file" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
|
|
|
|
<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" onClick={() => navigate('/login')}>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" onClick={() => navigate('/previewer')}>
|
|
Presentar
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|