New header and backgroud style
This commit is contained in:
Jose Selesan
@@ -2,11 +2,11 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="iimage/x-icon" href="/src/assets/playzer-favicon-transparent.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>PlayZer</title>
|
<title>PlayZer</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body lass="bg-background text-foreground antialiased">
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -1,182 +0,0 @@
|
|||||||
.counter {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: var(--accent);
|
|
||||||
background: var(--accent-bg);
|
|
||||||
border: 2px solid transparent;
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--accent-border);
|
|
||||||
}
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 2px solid var(--accent);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.base,
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
inset-inline: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base {
|
|
||||||
width: 170px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework {
|
|
||||||
z-index: 1;
|
|
||||||
top: 34px;
|
|
||||||
height: 28px;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) scale(1.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vite {
|
|
||||||
z-index: 0;
|
|
||||||
top: 107px;
|
|
||||||
height: 26px;
|
|
||||||
width: auto;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) scale(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
place-content: center;
|
|
||||||
place-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 32px 20px 24px;
|
|
||||||
gap: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps {
|
|
||||||
display: flex;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
flex: 1 1 0;
|
|
||||||
padding: 32px;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 24px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#docs {
|
|
||||||
border-right: 1px solid var(--border);
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 32px 0 0;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--text-h);
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--social-bg);
|
|
||||||
display: flex;
|
|
||||||
padding: 6px 12px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: box-shadow 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
.button-icon {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
margin-top: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
li {
|
|
||||||
flex: 1 1 calc(50% - 8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#spacer {
|
|
||||||
height: 88px;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticks {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: -4.5px;
|
|
||||||
border: 5px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
left: 0;
|
|
||||||
border-left-color: var(--border);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
right: 0;
|
|
||||||
border-right-color: var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
BIN
apps/frontend/src/assets/playzer-favicon-512-transparent.png
Normal file
BIN
apps/frontend/src/assets/playzer-favicon-512-transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
BIN
apps/frontend/src/assets/playzer-favicon-transparent.ico
Normal file
BIN
apps/frontend/src/assets/playzer-favicon-transparent.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
apps/frontend/src/assets/playzer-favicon.ico
Normal file
BIN
apps/frontend/src/assets/playzer-favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
apps/frontend/src/assets/playzer-icon-p-transparent.png
Normal file
BIN
apps/frontend/src/assets/playzer-icon-p-transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
4
apps/frontend/src/assets/playzer-icon-p-transparent.svg
Normal file
4
apps/frontend/src/assets/playzer-icon-p-transparent.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 206 KiB |
3
apps/frontend/src/assets/playzer-icon-p.svg
Normal file
3
apps/frontend/src/assets/playzer-icon-p.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 372 KiB |
BIN
apps/frontend/src/assets/playzer-logo-transparent.png
Normal file
BIN
apps/frontend/src/assets/playzer-logo-transparent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 607 KiB |
4
apps/frontend/src/assets/playzer-logo-transparent.svg
Normal file
4
apps/frontend/src/assets/playzer-logo-transparent.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 810 KiB |
3
apps/frontend/src/assets/playzer-logo.svg
Normal file
3
apps/frontend/src/assets/playzer-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.2 MiB |
243
apps/frontend/src/components/header.tsx
Normal file
243
apps/frontend/src/components/header.tsx
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
import { useState } from "react"
|
||||||
|
import { CalendarDays, LogOut, Menu, Settings, User, X } from "lucide-react"
|
||||||
|
|
||||||
|
import PlayzerIcon from "@/assets/playzer-favicon-512-transparent.png"
|
||||||
|
import { Link, useLocation } from "@tanstack/react-router"
|
||||||
|
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu"
|
||||||
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||||
|
import { useAuth } from "@/lib/auth"
|
||||||
|
|
||||||
|
interface NavItemProps {
|
||||||
|
to: string
|
||||||
|
label: string
|
||||||
|
isMobile?: boolean
|
||||||
|
onClick?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavItem({ to, label, isMobile, onClick }: NavItemProps) {
|
||||||
|
const location = useLocation()
|
||||||
|
const currentPath = location.pathname
|
||||||
|
const isActive = to === "/" ? currentPath === "/" : currentPath.startsWith(to)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link to={to} onClick={onClick}>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size={isMobile ? "default" : "sm"}
|
||||||
|
className={[
|
||||||
|
"rounded-none transition-all duration-200 hover:bg-transparent",
|
||||||
|
"focus-visible:ring-2 focus-visible:ring-primary/50",
|
||||||
|
isMobile && "w-full justify-start rounded-2xl",
|
||||||
|
isActive
|
||||||
|
? "text-primary relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary"
|
||||||
|
: "text-muted-foreground hover:text-foreground relative hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:right-0 hover:after:h-0.5 hover:after:bg-primary/50",
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(" ")}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Header() {
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
const { user, isAuthenticated, displayName, avatarUrl, signOut } = useAuth();
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{ label: "Inicio", to: "/" },
|
||||||
|
{ label: "Reservas", to: "/booking" },
|
||||||
|
{ label: "Canchas", to: "/canchas" },
|
||||||
|
{ label: "Dashboard", to: "/dashboard" },
|
||||||
|
{ label: "Contacto", to: "/contacto" },
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="sticky top-0 z-50 w-full border-b border-border/60 bg-background/60 dark:border-primary/20 dark:bg-[#030a10]/90 backdrop-blur-xl">
|
||||||
|
<div className="absolute inset-0 -z-10 bg-gradient-to-b from-background/85 to-background/45 dark:from-[#030a10]/95 dark:to-[#030a10]/70" />
|
||||||
|
|
||||||
|
<div className="mx-auto flex h-16 w-full max-w-7xl items-center gap-4 px-4 sm:px-6 lg:px-8">
|
||||||
|
<Link to="/" className="group flex items-center gap-3">
|
||||||
|
<div className="flex size-10 items-center justify-center shadow-primary/10 ">
|
||||||
|
<img src={PlayzerIcon} alt="Playzer" className="size-7" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="bg-gradient-to-r from-primary via-primary to-reserved bg-clip-text text-xl font-bold tracking-tight text-transparent">
|
||||||
|
Playzer
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<nav className="hidden absolute left-1/2 -translate-x-1/2 items-center gap-1 md:flex">
|
||||||
|
{menuItems.map((item) => (
|
||||||
|
<NavItem key={item.label} to={item.to} label={item.label} />
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="flex-1" />
|
||||||
|
|
||||||
|
<div className="hidden items-center gap-2 md:flex">
|
||||||
|
<Button className="rounded-2xl px-5 shadow-lg shadow-primary/20">
|
||||||
|
<CalendarDays className="mr-2 size-4" />
|
||||||
|
Reservar ahora
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<button className="hidden size-10 rounded-full ring-2 ring-transparent transition-all duration-200 hover:ring-primary/30 focus:outline-none md:flex">
|
||||||
|
<Avatar className="size-10 border border-border/60 shadow-lg shadow-black/10">
|
||||||
|
<AvatarImage src={avatarUrl!} alt="Usuario" />
|
||||||
|
<AvatarFallback className="bg-primary/15 text-primary">
|
||||||
|
JD
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
</button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
|
||||||
|
<DropdownMenuContent
|
||||||
|
align="end"
|
||||||
|
className="w-64 rounded-2xl border-border/60 bg-popover/95 p-2 shadow-xl shadow-black/20 backdrop-blur-xl"
|
||||||
|
>
|
||||||
|
<DropdownMenuLabel className="px-2 py-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Avatar className="size-9">
|
||||||
|
<AvatarImage src={ avatarUrl ?? "https://github.com/shadcn.png"} alt="Usuario" />
|
||||||
|
<AvatarFallback className="bg-primary/15 text-primary">
|
||||||
|
JD
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
|
||||||
|
<div className="flex min-w-0 flex-col">
|
||||||
|
<span className="truncate text-sm font-medium">{displayName}</span>
|
||||||
|
<span className="truncate text-xs text-muted-foreground">
|
||||||
|
{user?.email}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
|
||||||
|
<DropdownMenuItem className="cursor-pointer rounded-xl">
|
||||||
|
<User className="mr-2 size-4" />
|
||||||
|
Mi Perfil
|
||||||
|
</DropdownMenuItem>
|
||||||
|
|
||||||
|
<DropdownMenuItem className="cursor-pointer rounded-xl">
|
||||||
|
<Settings className="mr-2 size-4" />
|
||||||
|
Configuración
|
||||||
|
</DropdownMenuItem>
|
||||||
|
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
|
||||||
|
<DropdownMenuItem className="cursor-pointer rounded-xl text-destructive focus:bg-destructive/10 focus:text-destructive">
|
||||||
|
<LogOut className="mr-2 size-4" />
|
||||||
|
Cerrar sesión
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
|
||||||
|
<Sheet open={open} onOpenChange={setOpen}>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<Button variant="outline" size="icon" className="rounded-2xl md:hidden">
|
||||||
|
{open ? <X className="size-5" /> : <Menu className="size-5" />}
|
||||||
|
</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
|
||||||
|
<SheetContent
|
||||||
|
side="right"
|
||||||
|
className="w-[88vw] border-border/60 bg-background/95 p-5 backdrop-blur-xl sm:max-w-sm"
|
||||||
|
>
|
||||||
|
<div className="mt-6 flex flex-col gap-6">
|
||||||
|
<div className="rounded-3xl border border-border/60 bg-card/70 p-4 shadow-xl shadow-black/10">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Avatar className="size-11">
|
||||||
|
<AvatarImage src="https://github.com/shadcn.png" alt="Usuario" />
|
||||||
|
<AvatarFallback className="bg-primary/15 text-primary">
|
||||||
|
JD
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
|
||||||
|
<div className="min-w-0">
|
||||||
|
<p className="truncate text-sm font-medium">John Doe</p>
|
||||||
|
<p className="truncate text-xs text-muted-foreground">
|
||||||
|
john@example.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex flex-col gap-1">
|
||||||
|
{menuItems.map((item) => (
|
||||||
|
<NavItem
|
||||||
|
key={item.label}
|
||||||
|
to={item.to}
|
||||||
|
label={item.label}
|
||||||
|
isMobile
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
className="rounded-2xl shadow-lg shadow-primary/20"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
<CalendarDays className="mr-2 size-4" />
|
||||||
|
Reservar ahora
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="border-t border-border/60 pt-4">
|
||||||
|
<p className="mb-2 px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||||
|
Cuenta
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<nav className="flex flex-col gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="justify-start rounded-2xl"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
<User className="mr-2 size-4" />
|
||||||
|
Mi Perfil
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="justify-start rounded-2xl"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
<Settings className="mr-2 size-4" />
|
||||||
|
Configuración
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="justify-start rounded-2xl text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
<LogOut className="mr-2 size-4" />
|
||||||
|
Cerrar sesión
|
||||||
|
</Button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
34
apps/frontend/src/components/layout.tsx
Normal file
34
apps/frontend/src/components/layout.tsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import type { ReactNode } from "react"
|
||||||
|
import { Header } from "./header"
|
||||||
|
|
||||||
|
interface LayoutProps {
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Layout({ children }: LayoutProps) {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-dvh overflow-x-hidden bg-background text-foreground">
|
||||||
|
<Background />
|
||||||
|
<Header />
|
||||||
|
<main className="relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Background() {
|
||||||
|
return (
|
||||||
|
<div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-[#040b11] to-[#09131c]" />
|
||||||
|
|
||||||
|
<div className="absolute left-0 top-0 h-[420px] w-[420px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 blur-3xl" />
|
||||||
|
<div className="absolute right-0 top-24 h-[360px] w-[360px] translate-x-1/3 rounded-full bg-reserved/15 blur-3xl" />
|
||||||
|
<div className="absolute bottom-0 left-1/2 h-[300px] w-[300px] -translate-x-1/2 translate-y-1/3 rounded-full bg-accent/10 blur-3xl" />
|
||||||
|
|
||||||
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,oklch(1_0_0/0.055)_1px,transparent_1px),linear-gradient(to_bottom,oklch(1_0_0/0.055)_1px,transparent_1px)] bg-[size:64px_64px]" />
|
||||||
|
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,#09131c_78%)]" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -90,7 +90,7 @@ function DialogFooter({
|
|||||||
<div
|
<div
|
||||||
data-slot="dialog-footer"
|
data-slot="dialog-footer"
|
||||||
className={cn(
|
className={cn(
|
||||||
'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
|
'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-green-50/70 p-4 sm:flex-row sm:justify-end dark:bg-muted/50',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
145
apps/frontend/src/components/ui/sheet.tsx
Normal file
145
apps/frontend/src/components/ui/sheet.tsx
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Dialog as SheetPrimitive } from "radix-ui"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { XIcon } from "lucide-react"
|
||||||
|
|
||||||
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||||
|
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||||
|
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||||
|
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||||
|
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
data-slot="sheet-overlay"
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
side = "right",
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||||
|
side?: "top" | "right" | "bottom" | "left"
|
||||||
|
showCloseButton?: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SheetPortal>
|
||||||
|
<SheetOverlay />
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
data-slot="sheet-content"
|
||||||
|
data-side={side}
|
||||||
|
className={cn(
|
||||||
|
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<SheetPrimitive.Close data-slot="sheet-close" asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="absolute top-3 right-3"
|
||||||
|
size="icon-sm"
|
||||||
|
>
|
||||||
|
<XIcon
|
||||||
|
/>
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</Button>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-header"
|
||||||
|
className={cn("flex flex-col gap-0.5 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="sheet-footer"
|
||||||
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
data-slot="sheet-title"
|
||||||
|
className={cn(
|
||||||
|
"font-heading text-base font-medium text-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function SheetDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
data-slot="sheet-description"
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
}
|
||||||
@@ -1,44 +1,80 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@import "tw-animate-css";
|
@import "tw-animate-css";
|
||||||
@import "shadcn/tailwind.css";
|
@import "shadcn/tailwind.css";
|
||||||
@import "@fontsource-variable/geist";
|
/* @import "@fontsource-variable/inter"; */
|
||||||
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@source "../../../apps/**/*.{ts,tsx}";
|
||||||
|
@source "../../../components/**/*.{ts,tsx}";
|
||||||
|
@source "../**/*.{ts,tsx}";
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#root {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--font-heading: var(--font-sans);
|
--font-heading: var(--font-sans);
|
||||||
--font-sans: "Geist Variable", sans-serif;
|
|
||||||
--color-sidebar-ring: var(--sidebar-ring);
|
|
||||||
--color-sidebar-border: var(--sidebar-border);
|
|
||||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
||||||
--color-sidebar-accent: var(--sidebar-accent);
|
|
||||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
||||||
--color-sidebar-primary: var(--sidebar-primary);
|
|
||||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
||||||
--color-sidebar: var(--sidebar);
|
|
||||||
--color-chart-5: var(--chart-5);
|
|
||||||
--color-chart-4: var(--chart-4);
|
|
||||||
--color-chart-3: var(--chart-3);
|
|
||||||
--color-chart-2: var(--chart-2);
|
|
||||||
--color-chart-1: var(--chart-1);
|
|
||||||
--color-ring: var(--ring);
|
|
||||||
--color-input: var(--input);
|
|
||||||
--color-border: var(--border);
|
|
||||||
--color-destructive: var(--destructive);
|
|
||||||
--color-accent-foreground: var(--accent-foreground);
|
|
||||||
--color-accent: var(--accent);
|
|
||||||
--color-muted-foreground: var(--muted-foreground);
|
|
||||||
--color-muted: var(--muted);
|
|
||||||
--color-secondary-foreground: var(--secondary-foreground);
|
|
||||||
--color-secondary: var(--secondary);
|
|
||||||
--color-primary-foreground: var(--primary-foreground);
|
|
||||||
--color-primary: var(--primary);
|
|
||||||
--color-popover-foreground: var(--popover-foreground);
|
|
||||||
--color-popover: var(--popover);
|
|
||||||
--color-card-foreground: var(--card-foreground);
|
|
||||||
--color-card: var(--card);
|
|
||||||
--color-foreground: var(--foreground);
|
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-destructive-foreground: var(--destructive-foreground);
|
||||||
|
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
|
||||||
|
--color-success: var(--success);
|
||||||
|
--color-success-foreground: var(--success-foreground);
|
||||||
|
|
||||||
|
--color-reserved: var(--reserved);
|
||||||
|
--color-reserved-foreground: var(--reserved-foreground);
|
||||||
|
|
||||||
|
--color-maintenance: var(--maintenance);
|
||||||
|
--color-maintenance-foreground: var(--maintenance-foreground);
|
||||||
|
|
||||||
|
--color-warning: var(--warning);
|
||||||
|
--color-warning-foreground: var(--warning-foreground);
|
||||||
|
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
|
||||||
--radius-sm: calc(var(--radius) * 0.6);
|
--radius-sm: calc(var(--radius) * 0.6);
|
||||||
--radius-md: calc(var(--radius) * 0.8);
|
--radius-md: calc(var(--radius) * 0.8);
|
||||||
--radius-lg: var(--radius);
|
--radius-lg: var(--radius);
|
||||||
@@ -46,85 +82,137 @@
|
|||||||
--radius-2xl: calc(var(--radius) * 1.8);
|
--radius-2xl: calc(var(--radius) * 1.8);
|
||||||
--radius-3xl: calc(var(--radius) * 2.2);
|
--radius-3xl: calc(var(--radius) * 2.2);
|
||||||
--radius-4xl: calc(var(--radius) * 2.6);
|
--radius-4xl: calc(var(--radius) * 2.6);
|
||||||
|
|
||||||
|
--font-sans: "Inter Variable", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: oklch(1 0 0);
|
--background: oklch(0.985 0.004 240);
|
||||||
--foreground: oklch(0.145 0 0);
|
--foreground: oklch(0.18 0.012 245);
|
||||||
|
|
||||||
--card: oklch(1 0 0);
|
--card: oklch(1 0 0);
|
||||||
--card-foreground: oklch(0.145 0 0);
|
--card-foreground: oklch(0.18 0.012 245);
|
||||||
|
|
||||||
--popover: oklch(1 0 0);
|
--popover: oklch(1 0 0);
|
||||||
--popover-foreground: oklch(0.145 0 0);
|
--popover-foreground: oklch(0.18 0.012 245);
|
||||||
--primary: oklch(0.205 0 0);
|
|
||||||
--primary-foreground: oklch(0.985 0 0);
|
--primary: oklch(0.63 0.19 158);
|
||||||
--secondary: oklch(0.97 0 0);
|
--primary-foreground: oklch(0.985 0.004 160);
|
||||||
--secondary-foreground: oklch(0.205 0 0);
|
|
||||||
--muted: oklch(0.97 0 0);
|
--secondary: oklch(0.94 0.01 240);
|
||||||
--muted-foreground: oklch(0.556 0 0);
|
--secondary-foreground: oklch(0.28 0.018 245);
|
||||||
--accent: oklch(0.97 0 0);
|
|
||||||
--accent-foreground: oklch(0.205 0 0);
|
--muted: oklch(0.95 0.008 240);
|
||||||
--destructive: oklch(0.577 0.245 27.325);
|
--muted-foreground: oklch(0.52 0.018 245);
|
||||||
--border: oklch(0.922 0 0);
|
|
||||||
--input: oklch(0.922 0 0);
|
--accent: oklch(0.93 0.035 158);
|
||||||
--ring: oklch(0.708 0 0);
|
--accent-foreground: oklch(0.34 0.12 158);
|
||||||
--chart-1: oklch(0.87 0 0);
|
|
||||||
--chart-2: oklch(0.556 0 0);
|
--destructive: oklch(0.62 0.22 25);
|
||||||
--chart-3: oklch(0.439 0 0);
|
--destructive-foreground: oklch(0.98 0.01 25);
|
||||||
--chart-4: oklch(0.371 0 0);
|
|
||||||
--chart-5: oklch(0.269 0 0);
|
--success: oklch(0.63 0.19 158);
|
||||||
--radius: 0.625rem;
|
--success-foreground: oklch(0.985 0.004 160);
|
||||||
--sidebar: oklch(0.985 0 0);
|
|
||||||
--sidebar-foreground: oklch(0.145 0 0);
|
--reserved: oklch(0.58 0.19 255);
|
||||||
--sidebar-primary: oklch(0.205 0 0);
|
--reserved-foreground: oklch(0.985 0.01 255);
|
||||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
||||||
--sidebar-accent: oklch(0.97 0 0);
|
--maintenance: oklch(0.64 0.22 25);
|
||||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
--maintenance-foreground: oklch(0.985 0.01 25);
|
||||||
--sidebar-border: oklch(0.922 0 0);
|
|
||||||
--sidebar-ring: oklch(0.708 0 0);
|
--warning: oklch(0.78 0.16 75);
|
||||||
|
--warning-foreground: oklch(0.18 0.04 75);
|
||||||
|
|
||||||
|
--border: oklch(0.86 0.01 245 / 65%);
|
||||||
|
--input: oklch(0.86 0.01 245 / 75%);
|
||||||
|
--ring: oklch(0.63 0.19 158);
|
||||||
|
|
||||||
|
--chart-1: oklch(0.63 0.19 158);
|
||||||
|
--chart-2: oklch(0.58 0.19 255);
|
||||||
|
--chart-3: oklch(0.64 0.22 25);
|
||||||
|
--chart-4: oklch(0.78 0.16 75);
|
||||||
|
--chart-5: oklch(0.68 0.16 205);
|
||||||
|
|
||||||
|
--radius: 0.875rem;
|
||||||
|
|
||||||
|
--sidebar: oklch(0.98 0.004 240);
|
||||||
|
--sidebar-foreground: oklch(0.18 0.012 245);
|
||||||
|
--sidebar-primary: oklch(0.63 0.19 158);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0.004 160);
|
||||||
|
--sidebar-accent: oklch(0.94 0.01 240);
|
||||||
|
--sidebar-accent-foreground: oklch(0.28 0.018 245);
|
||||||
|
--sidebar-border: oklch(0.86 0.01 245 / 65%);
|
||||||
|
--sidebar-ring: oklch(0.63 0.19 158);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: oklch(0.145 0 0);
|
--background: #081118;
|
||||||
--foreground: oklch(0.985 0 0);
|
--foreground: oklch(0.96 0.006 245);
|
||||||
--card: oklch(0.205 0 0);
|
|
||||||
--card-foreground: oklch(0.985 0 0);
|
--card: oklch(0.19 0.022 240);
|
||||||
--popover: oklch(0.205 0 0);
|
--card-foreground: oklch(0.96 0.006 245);
|
||||||
--popover-foreground: oklch(0.985 0 0);
|
|
||||||
--primary: oklch(0.922 0 0);
|
--popover: oklch(0.18 0.022 240);
|
||||||
--primary-foreground: oklch(0.205 0 0);
|
--popover-foreground: oklch(0.96 0.006 245);
|
||||||
--secondary: oklch(0.269 0 0);
|
|
||||||
--secondary-foreground: oklch(0.985 0 0);
|
--primary: oklch(0.67 0.21 158);
|
||||||
--muted: oklch(0.269 0 0);
|
--primary-foreground: oklch(0.12 0.02 158);
|
||||||
--muted-foreground: oklch(0.708 0 0);
|
|
||||||
--accent: oklch(0.269 0 0);
|
--secondary: oklch(0.235 0.024 240);
|
||||||
--accent-foreground: oklch(0.985 0 0);
|
--secondary-foreground: oklch(0.9 0.008 245);
|
||||||
--destructive: oklch(0.704 0.191 22.216);
|
|
||||||
--border: oklch(1 0 0 / 10%);
|
--muted: oklch(0.24 0.022 240);
|
||||||
--input: oklch(1 0 0 / 15%);
|
--muted-foreground: oklch(0.68 0.018 245);
|
||||||
--ring: oklch(0.556 0 0);
|
|
||||||
--chart-1: oklch(0.87 0 0);
|
--accent: oklch(0.28 0.06 158);
|
||||||
--chart-2: oklch(0.556 0 0);
|
--accent-foreground: oklch(0.9 0.04 158);
|
||||||
--chart-3: oklch(0.439 0 0);
|
|
||||||
--chart-4: oklch(0.371 0 0);
|
--destructive: oklch(0.66 0.23 25);
|
||||||
--chart-5: oklch(0.269 0 0);
|
--destructive-foreground: oklch(0.98 0.01 25);
|
||||||
--sidebar: oklch(0.205 0 0);
|
|
||||||
--sidebar-foreground: oklch(0.985 0 0);
|
--success: oklch(0.67 0.21 158);
|
||||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
--success-foreground: oklch(0.12 0.02 158);
|
||||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
||||||
--sidebar-accent: oklch(0.269 0 0);
|
--reserved: oklch(0.61 0.2 255);
|
||||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
--reserved-foreground: oklch(0.97 0.012 255);
|
||||||
--sidebar-border: oklch(1 0 0 / 10%);
|
|
||||||
--sidebar-ring: oklch(0.556 0 0);
|
--maintenance: oklch(0.66 0.23 25);
|
||||||
|
--maintenance-foreground: oklch(0.98 0.01 25);
|
||||||
|
|
||||||
|
--warning: oklch(0.78 0.17 75);
|
||||||
|
--warning-foreground: oklch(0.18 0.04 75);
|
||||||
|
|
||||||
|
--border: oklch(1 0 0 / 11%);
|
||||||
|
--input: oklch(1 0 0 / 14%);
|
||||||
|
--ring: oklch(0.67 0.21 158);
|
||||||
|
|
||||||
|
--chart-1: oklch(0.67 0.21 158);
|
||||||
|
--chart-2: oklch(0.61 0.2 255);
|
||||||
|
--chart-3: oklch(0.66 0.23 25);
|
||||||
|
--chart-4: oklch(0.78 0.17 75);
|
||||||
|
--chart-5: oklch(0.7 0.16 205);
|
||||||
|
|
||||||
|
--sidebar: oklch(0.165 0.02 240);
|
||||||
|
--sidebar-foreground: oklch(0.96 0.006 245);
|
||||||
|
--sidebar-primary: oklch(0.67 0.21 158);
|
||||||
|
--sidebar-primary-foreground: oklch(0.12 0.02 158);
|
||||||
|
--sidebar-accent: oklch(0.235 0.024 240);
|
||||||
|
--sidebar-accent-foreground: oklch(0.9 0.008 245);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 11%);
|
||||||
|
--sidebar-ring: oklch(0.67 0.21 158);
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border outline-ring/50;
|
@apply border-border outline-ring/50;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground antialiased;
|
||||||
}
|
}
|
||||||
html {
|
|
||||||
@apply font-sans;
|
button:not(:disabled),
|
||||||
|
[role="button"]:not(:disabled) {
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { Layout } from '@/components/layout';
|
||||||
import { NotFoundPage } from '@/features/not-found/not-found-page';
|
import { NotFoundPage } from '@/features/not-found/not-found-page';
|
||||||
import { ServerErrorPage } from '@/features/server-error/server-error-page';
|
import { ServerErrorPage } from '@/features/server-error/server-error-page';
|
||||||
import type { ApiClient } from '@/lib/api-client';
|
import type { ApiClient } from '@/lib/api-client';
|
||||||
@@ -10,7 +11,17 @@ type RouterContext = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const Route = createRootRouteWithContext<RouterContext>()({
|
export const Route = createRootRouteWithContext<RouterContext>()({
|
||||||
component: Outlet,
|
component: RootRoute,
|
||||||
errorComponent: ServerErrorPage,
|
errorComponent: ServerErrorPage,
|
||||||
notFoundComponent: NotFoundPage,
|
notFoundComponent: NotFoundPage,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function RootRoute() {
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="flex flex-col p-6">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user