BlogLayout

The `BlogLayout is very simple. It provides the structure of the Blog Components. 

<script setup>
import NavBar from "@/Components/NavBar.vue";
import {Head} from "@inertiajs/vue3";
import Footer from "@/Components/Footer.vue";

const props = defineProps({
    title: {
        type: String,
        required: true,
    },
});
</script>

<template>
    <div class="bg-skin-fill scroll-smooth">

        <Head :title="props.title" />

        <NavBar
            :navigation="[
                { name: 'Posts', href: '/blog' }
            ]"
        />

        <main class="min-h-screen max-w-6xl mx-auto p-8 pt-20">
            <slot />
        </main>

        <Footer />

    </div>
</template>

<style scoped>

</style>


import BlogLayout from "@/Layouts/BlogLayout.vue";