35 lines
633 B
Vue
35 lines
633 B
Vue
<template>
|
|
<article
|
|
class="mobile-card rounded-2xl border-base surface 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>
|
|
|
|
<style scoped>
|
|
.mobile-card {
|
|
box-shadow: 0 1px 2px var(--admin-shadow);
|
|
}
|
|
</style>
|