62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Card, type Key, Tabs } from "@heroui/react"
|
|
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
|
|
|
|
export const Route = createFileRoute("/access")({
|
|
beforeLoad: ({ location }) => {
|
|
if (location.pathname === "/access") {
|
|
redirect({
|
|
to: "/access/login",
|
|
replace: true,
|
|
throw: true
|
|
})
|
|
}
|
|
},
|
|
component: RouteComponent
|
|
})
|
|
|
|
function RouteComponent() {
|
|
const navigate = Route.useNavigate()
|
|
|
|
const onSelectTab = (tabId: Key) => {
|
|
navigate({
|
|
to: `/access/${tabId}`,
|
|
viewTransition: true
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="grid-cols-2 grid min-h-screen">
|
|
<div className=" p-5 bg-default">
|
|
<h1 className="text-4xl font-bold text-end ">
|
|
Find<span className="text-accent">your</span>Pilot
|
|
</h1>
|
|
<div className="flex items-center justify-center min-h-[90vh]">
|
|
<Card className="w-full max-w-md bg-white/90 backdrop-blur-2xl border-3 border-accent-soft">
|
|
<Card.Header>
|
|
<Tabs className="w-full max-w-md" onSelectionChange={onSelectTab}>
|
|
<Tabs.ListContainer>
|
|
<Tabs.List aria-label="Options">
|
|
<Tabs.Tab id="login" className="text-lg">
|
|
Acceso
|
|
<Tabs.Indicator className="bg-accent" />
|
|
</Tabs.Tab>
|
|
<Tabs.Tab id="register" className="text-lg ">
|
|
<Tabs.Separator />
|
|
Registro
|
|
<Tabs.Indicator className="bg-accent" />
|
|
</Tabs.Tab>
|
|
</Tabs.List>
|
|
</Tabs.ListContainer>
|
|
</Tabs>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
<Outlet />
|
|
</Card.Content>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
<div className="bg-accent bg-[url('https://cdn.pixabay.com/photo/2023/03/22/22/37/mavic-2-7870679_1280.jpg')] bg-cover"></div>
|
|
</div>
|
|
)
|
|
}
|