<script lang="ts">
	import { resolve } from "$app/paths";
	import Button from "$lib/components/ui/button/button.svelte";
	import VideoAdd from "remixicon-svelte/icons/video-add-fill";

	const { children } = $props();
</script>

<div class="fixed top-0 left-0 flex h-12 w-screen items-center p-2">
	<h2 class="flex-1 text-2xl">CCTV</h2>
	<Button href={resolve("/new")} variant="outline" size="icon" aria-label="New camera">
		<VideoAdd />
	</Button>
</div>

<main>
	{#each Array(1000) as _, idx (idx)}
		<p>Hey!</p>
	{/each}
</main>

{@render children()}
