<script lang="ts">
    import '../app.css';
    import { ToastContainer, FlatToast } from 'svelte-toasts';
    import { PageIcon } from '@luke-else/component-lib';
</script>

<div
    class="min-h-screen px-8 py-4 bg-white text-slate-600 dark:bg-slate-900/90 dark:text-slate-200/60 md:text-2xl sm:text-md font-mono flex flex-col gap-5 transition duration-1000 ease-in-out"
>
    <nav
        class="w-full px-8 py-4 flex gap-10 text-xl justify-center items-center text-green-600 font-semibold"
    >
        <a href="/" class="hover:underline">//Profile</a>
        <a href="/repos" class="hover:underline">//Repos</a>
        <a href="/contact" class="hover:underline">//Contact</a>
    </nav>

    <a href="https://git.luke-else.co.uk" target="_blank">
        <PageIcon iconClass="devicon-git-plain" />
    </a>

    <div class="container mx-auto justify-center items-center flex flex-col">
        <slot />
        <ToastContainer let:data>
            <FlatToast {data} />
        </ToastContainer>
    </div>
</div>
