64 lines
1.9 KiB
Svelte
64 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import MdevTriangle from '$lib/components/custom/mdev-triangle.svelte';
|
|
import { ModeWatcher, toggleMode } from 'mode-watcher';
|
|
import SunIcon from '@lucide/svelte/icons/sun';
|
|
import MoonIcon from '@lucide/svelte/icons/moon';
|
|
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
|
|
|
|
|
|
let { children } = $props();
|
|
</script>
|
|
|
|
<ModeWatcher />
|
|
|
|
<div class="flex flex-col min-h-dvh">
|
|
|
|
<div class="flex justify-center">
|
|
|
|
<header class="flex justify-between items-center max-w-7xl w-screen p-4">
|
|
<a href="/" class="flex items-center gap-2 text-2xl font-bold">
|
|
<MdevTriangle size={48} class="text-primary" />
|
|
<span class="hidden sm:block">MarinoDev Lost & Found</span>
|
|
</a>
|
|
<div class="items-center flex gap-4">
|
|
<div class="inline-block">
|
|
<a href="/account" class={buttonVariants({variant: 'outline'})}>
|
|
Account
|
|
</a>
|
|
</div>
|
|
<div class="inline-block">
|
|
<Button onclick={toggleMode} variant="outline" size="icon">
|
|
<SunIcon
|
|
class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"
|
|
/>
|
|
<MoonIcon
|
|
class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"
|
|
/>
|
|
<span class="sr-only">Toggle theme</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<div class="flex-1">
|
|
|
|
<div class="flex justify-center">
|
|
<main class="w-full">
|
|
{@render children?.()}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="gap-2 py-2 text-center text-sm text-muted-foreground">
|
|
<p>
|
|
{new Date().getFullYear()} MarinoDev. <a href="https://git.marinodev.com/drake/fbla26"
|
|
class="hover:underline">Git Repository</a>
|
|
</p>
|
|
<!-- <p>-->
|
|
<!-- <a href="/privacy" class="underline hover:text-gray-700">Privacy Policy</a> |-->
|
|
<!-- <a href="/terms" class="underline hover:text-gray-700">Terms of Service</a>-->
|
|
<!-- </p>-->
|
|
</footer>
|
|
</div>
|