41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="relative flex flex-col border-2"
|
||
|
|
:class="className"
|
||
|
|
:style="{ borderColor: borderColor, backgroundColor: bgColor }"
|
||
|
|
>
|
||
|
|
<div v-if="title" class="absolute -top-3 left-2 bg-[#1b1026] px-1 z-10">
|
||
|
|
<span class="text-[10px] font-bold tracking-widest uppercase text-[#8f80a0]">{{ title }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex-grow">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Corner Pixels for decoration -->
|
||
|
|
<div class="absolute -top-1 -left-1 w-1 h-1 bg-[#1b1026]" />
|
||
|
|
<div class="absolute -top-1 -right-1 w-1 h-1 bg-[#1b1026]" />
|
||
|
|
<div class="absolute -bottom-1 -left-1 w-1 h-1 bg-[#1b1026]" />
|
||
|
|
<div class="absolute -bottom-1 -right-1 w-1 h-1 bg-[#1b1026]" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
title?: string;
|
||
|
|
className?: string;
|
||
|
|
variant?: 'default' | 'inset';
|
||
|
|
highlight?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
className: '',
|
||
|
|
variant: 'default',
|
||
|
|
highlight: false
|
||
|
|
});
|
||
|
|
|
||
|
|
const borderColor = computed(() => props.highlight ? '#f6b26b' : '#4a3b5e');
|
||
|
|
const bgColor = computed(() => props.variant === 'inset' ? '#0f0816' : '#1b1026');
|
||
|
|
</script>
|