73 lines
2 KiB
Svelte
73 lines
2 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator
|
|
} from '$lib/components/ui/breadcrumb';
|
|
import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
|
|
import { cn } from '$lib/utils';
|
|
import { getContext } from 'svelte';
|
|
import Nav from '$lib/components/nav.svelte';
|
|
import type { User } from '$lib/server/db/schema/users';
|
|
|
|
let {
|
|
breadcrumbs,
|
|
className,
|
|
children
|
|
}: { breadcrumbs: BreadcrumbItemType[]; className?: string; children: any } = $props();
|
|
|
|
const user = getContext<User>('user');
|
|
</script>
|
|
|
|
<div class="mx-auto flex min-h-screen max-w-7xl flex-col px-4 pt-4 pb-8 sm:px-6 lg:px-8">
|
|
<!-- Header -->
|
|
<header class="flex flex-col gap-4 pb-8">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1">
|
|
<a href="/" class="text-primary text-2xl font-bold">FlbxCup</a>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
{#if user}
|
|
<div class="text-muted-foreground text-sm">
|
|
Welcome, {user.username || 'User'}
|
|
</div>
|
|
<a href="/auth/logout" class="text-primary text-sm hover:underline">Logout</a>
|
|
{:else}
|
|
<a href="/auth/login" class="text-primary text-sm hover:underline">Login</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="border-b pb-2">
|
|
<Nav />
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Breadcrumbs -->
|
|
{#if breadcrumbs?.length}
|
|
<Breadcrumb class="mb-6">
|
|
<BreadcrumbList>
|
|
{#each breadcrumbs as crumb, i}
|
|
<BreadcrumbItem>
|
|
<a href={crumb.href} class={cn(i === breadcrumbs.length - 1 ? 'font-medium' : '')}>
|
|
{crumb.title}
|
|
</a>
|
|
</BreadcrumbItem>
|
|
{#if i < breadcrumbs.length - 1}
|
|
<BreadcrumbSeparator />
|
|
{/if}
|
|
{/each}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
{/if}
|
|
|
|
<!-- Main content -->
|
|
<main class={cn('flex-1', className)}>
|
|
{@render children?.()}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="text-muted-foreground mt-12 border-t pt-6 text-center text-sm">
|
|
<p>© {new Date().getFullYear()} FlbxCup. All rights reserved.</p>
|
|
</footer>
|
|
</div>
|