48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import type { Route } from './+types/layout'
|
|
|
|
import { Link, Outlet } from 'react-router'
|
|
|
|
import { userContext } from '@repo/auth/context'
|
|
import { authMiddleware } from '@repo/auth/middleware/auth'
|
|
import { ModeToggle, ThemedImage } from '@repo/ui/components/dark-mode'
|
|
import { NavUser } from '@repo/ui/components/nav-user'
|
|
|
|
export const middleware: Route.MiddlewareFunction[] = [authMiddleware]
|
|
|
|
export async function loader({ context }: Route.ActionArgs) {
|
|
const user = context.get(userContext)
|
|
return { user }
|
|
}
|
|
|
|
export default function Component({ loaderData }: Route.ComponentProps) {
|
|
const { user } = loaderData
|
|
|
|
return (
|
|
<div className="relative flex flex-col flex-1 min-w-0">
|
|
<header
|
|
className="bg-background/15 backdrop-blur-sm
|
|
px-4 py-2 lg:py-4 sticky top-0 z-5"
|
|
>
|
|
<div className="container mx-auto flex items-center max-w-7xl">
|
|
<Link to="/">
|
|
<ThemedImage className="flex gap-1">
|
|
<span className="text-muted-foreground text-xs">Estúdio</span>
|
|
</ThemedImage>
|
|
</Link>
|
|
|
|
<div className="ml-auto flex gap-2.5 items-center">
|
|
<ModeToggle />
|
|
<NavUser user={user} excludeApps={['studio']} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="p-4">
|
|
<div className="container mx-auto max-w-7xl">
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|