34 lines
857 B
Vue
34 lines
857 B
Vue
<template>
|
|
<div :class="cardClass">
|
|
<div v-if="$slots.header" class="px-6 py-4 border-b border-gray-200 text-gray-900">
|
|
<slot name="header" />
|
|
</div>
|
|
<div class="px-6 py-4 text-gray-900">
|
|
<slot />
|
|
</div>
|
|
<div v-if="$slots.footer" class="px-6 py-4 border-t border-gray-200 bg-gray-50/50 text-gray-900">
|
|
<slot name="footer" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
variant?: 'default' | 'elevated'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'default'
|
|
})
|
|
|
|
const cardClass = computed(() => {
|
|
const base = 'bg-white/80 backdrop-blur-xl rounded-2xl border border-white/20 overflow-hidden text-gray-900'
|
|
const variants = {
|
|
default: `${base} shadow-sm`,
|
|
elevated: `${base} shadow-2xl shadow-black/5`
|
|
}
|
|
return variants[props.variant]
|
|
})
|
|
</script>
|
|
|