initial commit

resources/js/Components/SectionFullScreen.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from 'vue'
+import { StyleService } from '@/Stores/style'
+import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors'
+
+const props = defineProps({
+  bg: {
+    type: String,
+    required: true,
+    validator: value => ['purplePink', 'pinkRed', 'greenBlue'].includes(value)
+  }
+})
+
+const colorClass = computed(() => {
+  if (StyleService().darkMode) {
+    return gradientBgDark
+  }
+
+  switch (props.bg) {
+    case 'purplePink':
+      return gradientBgPurplePink
+    case 'pinkRed':
+      return  gradientBgPinkRed
+    case 'greenBlue':
+      return gradientBgGreenBlue
+  }
+  
+  return ''
+})
+</script>
+
+<template>
+  <div
+    class="flex min-h-screen items-center justify-center"
+    :class="colorClass"
+  >
+    <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
+  </div>
+</template>