41 lines
794 B
Vue
41 lines
794 B
Vue
<template>
|
|
<div
|
|
:class="['card', { 'card--interactive': interactive }]"
|
|
@click="interactive ? $emit('click', $event) : undefined"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
/** Adds pointer cursor + hover lift; makes the card clickable. */
|
|
interactive?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: "click", event: MouseEvent): void
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
background: var(--surface-card);
|
|
border: 1px solid var(--border-default);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-2);
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.card--interactive {
|
|
cursor: pointer;
|
|
transition:
|
|
box-shadow 140ms ease,
|
|
transform 140ms ease;
|
|
}
|
|
|
|
.card--interactive:hover {
|
|
box-shadow: var(--shadow-3);
|
|
transform: translateY(-2px);
|
|
}
|
|
</style>
|