<script setup>
import { Link } from "@inertiajs/vue3";
</script>

<template>
  <div class="h-screen flex flex-col">
    <header class="p-3 bg-rose-800 dark:bg-rose-950">
      <div class="max-w-5xl flex gap-2 mx-auto">
        <Link href="/" class="text-white font-extrabold">
          <img src="@/favicon.svg" class="h-8 inline" />
          <span
            class="px-1 relative top-0.5 text-transparent bg-clip-text bg-gradient-to-r to-slate-600 from-[#2f365f]"
            >OwnMedia</span
          >
        </Link>
      </div>
    </header>
    <div class="p-4 h-full">
      <div class="p-4 bg-rose-950 rounded h-full">
        <slot />
      </div>
    </div>
    <footer class="bg-slate-800 px-4">
      footer
    </footer>
  </div>
</template>
