29 lines
546 B
Vue
29 lines
546 B
Vue
|
<template>
|
||
|
|
<article
|
||
|
|
class="rounded-2xl border border-gray-200 bg-white shadow-sm"
|
||
|
|
:class="[paddingClass, clickable ? 'cursor-pointer' : '']"
|
||
|
|
@click="clickable ? $emit('click') : undefined"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
</article>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
clickable?: boolean
|
||
|
|
compact?: boolean
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
clickable: false,
|
||
|
|
compact: true
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
defineEmits<{
|
||
|
|
(e: 'click'): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const paddingClass = computed(() => (props.compact ? 'px-3 py-3' : 'p-4'))
|
||
|
|
</script>
|