50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
|
|
const page = usePage();
|
|
const appEnv = computed(() => page.props.app_env);
|
|
|
|
const isDevelopment = computed(() => appEnv.value !== 'production');
|
|
|
|
const bannerStyles = computed(() => {
|
|
if (appEnv.value === 'local') {
|
|
return 'bg-amber-400 text-amber-950 border-amber-500/50';
|
|
} else if (appEnv.value === 'staging') {
|
|
return 'bg-blue-500 text-white border-blue-600/50';
|
|
}
|
|
return 'bg-rose-500 text-white border-rose-600/50';
|
|
});
|
|
|
|
const label = computed(() => {
|
|
if (appEnv.value === 'local') return 'DEV';
|
|
if (appEnv.value === 'staging') return 'STG';
|
|
return appEnv.value?.toUpperCase() || 'ENV';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="isDevelopment"
|
|
class="fixed top-0 left-0 right-0 z-[9999] h-1 pointer-events-none shadow-sm shadow-black/10"
|
|
:class="bannerStyles"
|
|
></div>
|
|
|
|
<div
|
|
v-if="isDevelopment"
|
|
class="fixed top-4 -right-12 z-[9999] pointer-events-none select-none"
|
|
>
|
|
<div
|
|
class="transform rotate-45 py-1 px-14 text-[10px] font-black tracking-tighter shadow-lg border-y whitespace-nowrap text-center flex flex-col items-center justify-center leading-none"
|
|
:class="bannerStyles"
|
|
>
|
|
<span>ENV {{ label }}</span>
|
|
<span class="text-[7px] opacity-70 mt-0.5">{{ appEnv }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* No specific styles needed as Tailwind handles most of it, but ensure z-index is high */
|
|
</style>
|