Guest layout (#106)

SebKay · web-flow · commit bbe9357df622 · 2025-03-27T10:05:09.000Z
* Apply guest layout

* Adjust guest layout
diff --git a/resources/js/Components/Header.vue b/resources/js/Components/Header.vue
@@ -4,8 +4,11 @@
             <div class="mx-auto max-w-7xl">
                 <div class="flex h-16 items-center justify-between">
                     <div class="flex items-center">
-                        <Link :href="route('home')">
-                        <SparklesIcon class="size-7 shrink-0 text-brand-800" />
+                        <Link
+                            class="shrink-0 text-brand-800"
+                            :href="route('home')"
+                        >
+                        <SparklesIcon class="size-7" />
                         </Link>
                     </div>
 
@@ -80,7 +83,7 @@
 
 <script setup>
     import { ref, onMounted } from "vue";
-    import { router } from '@inertiajs/vue3'
+    import { router } from '@inertiajs/vue3';
 
     import {
         Sparkles as SparklesIcon,
diff --git a/resources/js/Layouts/Guest.vue b/resources/js/Layouts/Guest.vue
@@ -0,0 +1,21 @@
+<template>
+
+    <Head>
+        <title></title>
+    </Head>
+
+    <div class="min-h-full flex flex-col justify-center">
+        <main class="xl:py-16 py-8 px-4 sm:px-6 xl:px-8">
+            <div class="mx-auto max-w-7xl">
+                <SparklesIcon class="size-10 mx-auto text-brand-800 block mb-4 xl:mb-8" />
+                <slot />
+            </div>
+        </main>
+    </div>
+
+    <Notice />
+</template>
+
+<script setup>
+    import { Sparkles as SparklesIcon } from 'lucide-vue-next';
+</script>
diff --git a/resources/js/Pages/EmailVerification/Show.vue b/resources/js/Pages/EmailVerification/Show.vue
@@ -3,7 +3,10 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <PageTitle class="mb-4 xl:mb-8" :text="title" />
+        <PageTitle
+            class="mb-4 xl:mb-8"
+            :text="title"
+        />
 
         <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <div class="text-center">
@@ -21,6 +24,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { router } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/Login/Show.vue b/resources/js/Pages/Login/Show.vue
@@ -55,8 +55,7 @@
                                 type="checkbox"
                                 v-model="loginForm.remember"
                             />
-                            <div
-                                class="peer">
+                            <div class="peer">
                             </div>
                             <span>
                                 Remember me
@@ -89,6 +88,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/Register/Show.vue b/resources/js/Pages/Register/Show.vue
@@ -100,6 +100,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/ResetPassword/Edit.vue b/resources/js/Pages/ResetPassword/Edit.vue
@@ -3,7 +3,10 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <PageTitle class="mb-4 xl:mb-8" :text="title" />
+        <PageTitle
+            class="mb-4 xl:mb-8"
+            :text="title"
+        />
 
         <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <form @submit.prevent="submitForm">
@@ -54,6 +57,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/ResetPassword/Show.vue b/resources/js/Pages/ResetPassword/Show.vue
@@ -52,6 +52,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
