45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<template>
|
|
<div :class="cardClass">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
padding: {
|
|
type: String,
|
|
default: 'medium', // none | small | medium
|
|
},
|
|
tone: {
|
|
type: String,
|
|
default: 'default', // default | muted | primary
|
|
},
|
|
interactive: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const paddingMap: Record<string, string> = {
|
|
none: '',
|
|
small: 'p-4',
|
|
medium: 'p-6',
|
|
}
|
|
|
|
const toneMap: Record<string, string> = {
|
|
default: 'bg-white',
|
|
muted: 'bg-[#fbf8f4]',
|
|
primary: 'bg-[#f6f1ea]',
|
|
}
|
|
|
|
const cardClass = computed(() => {
|
|
const paddingClass = paddingMap[props.padding] || paddingMap.medium
|
|
const toneClass = toneMap[props.tone] || toneMap.default
|
|
const interactiveClass = props.interactive
|
|
? 'cursor-pointer transition-[transform,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[0_18px_34px_rgba(62,47,26,0.12)]'
|
|
: ''
|
|
const baseClass = 'rounded-[28px] border border-[#eadfce] text-[#2f2418] shadow-none'
|
|
return [baseClass, paddingClass, toneClass, interactiveClass].filter(Boolean).join(' ')
|
|
})
|
|
</script>
|