AlexRG/LayoutLaSalle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Agregar el login

Browse Source
This commit is contained in:
Your Name
2025-03-03 08:38:36 -06:00
parent 22161471f2
commit 15f6790d9b
5 changed files with 82 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/main.tsx
View File

@@ -1,9 +1,14 @@
import { StrictMode } from 'react'
// import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import App from './pages/App.tsx'
import { BrowserRouter, Route, Routes } from "react-router";
import Login from './pages/Login.tsx';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>,
)

28
src/App.tsx → src/pages/App.tsx
View File

@@ -1,7 +1,8 @@
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 { 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 { NavLink } from 'react-router';
function App() {
return (
@@ -15,13 +16,13 @@ function App() {
<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-bold">
<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-bold">
<Label htmlFor="model" className="border-l-4 border-red-500 pl-2 font-semibold">
Modelo 3D
</Label>
<Input id="model" type="file" />
@@ -31,12 +32,15 @@ function App() {
</CardContent>
<CardFooter className="flex justify-between">
<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 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>
<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>

44
src/pages/Login.tsx Normal file
View File

@@ -0,0 +1,44 @@
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 { useNavigate } from 'react-router';
function Login() {
let navigate = useNavigate();
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">
<Card className="w-full max-w-md p-6 bg-white rounded-xl shadow-lg">
<CardHeader className="text-center">
<CardTitle className="font-display text-2xl font-bold">Iniciar Sesión</CardTitle>
<CardDescription className="text-gray-500">Accede a tu cuenta para continuar</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid gap-4">
<div className="flex flex-col space-y-2">
<Label htmlFor="clave" className="font-semibold text-gray-700">Clave La Salle</Label>
<Input id="clave" type="clave" placeholder={`al${new Date().getFullYear().toString().slice(-2)}0000`} />
</div>
<div className="flex flex-col space-y-2">
<Label htmlFor="password" className="font-semibold text-gray-700">Contraseña</Label>
<Input id="password" type="password" placeholder="••••••••" />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex flex-col gap-4">
<Button
className="w-full font-bold text-lg py-2 bg-gradient-to-r from-blue-500 to-blue-700 text-white rounded-lg shadow-md transition-all duration-300 hover:scale-105 hover:shadow-lg active:shadow-sm" onClick={() => {
navigate("/");
}}
>
Iniciar sesión
</Button>
</CardFooter>
</Card>
</div>
);
}
export default Login;