tethys.backend/resources/js/Components/SectionFullScreen.vue
Arno Kaimbacher 296c8fd46e - added own provider for drive methods
- renamed middleware Role and Can to role_middleware and can_middleware
- added some typing for inertia vue3 components
- npm updates
2024-04-23 19:36:45 +02:00

38 lines
1.1 KiB
Vue

<script setup>
import { computed } from 'vue';
import { StyleService } from '@/Stores/style.service';
import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors';
const props = defineProps({
bg: {
type: String,
required: false,
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;
default:
return 'bg-white text-black dark:bg-slate-900/70 dark:text-white';
}
// return 'bg-white';
});
</script>
<template>
<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0" :class="colorClass">
<slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
</div>
</template>