804bd9c95d
All checks were successful
Build Docker Image / build (push) Successful in 5m48s
- Remove counter from /catalog/offers search bar - Add server-clustering to /catalog/offers/[productId] - Remove transition animations from Card.vue - Use client-side clustering for suppliers (data from exchange, not geo)
43 lines
940 B
Vue
43 lines
940 B
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-base-100',
|
|
muted: 'bg-base-200',
|
|
primary: 'bg-primary/10',
|
|
}
|
|
|
|
const cardClass = computed(() => {
|
|
const paddingClass = paddingMap[props.padding] || paddingMap.medium
|
|
const toneClass = toneMap[props.tone] || toneMap.default
|
|
const interactiveClass = props.interactive ? 'cursor-pointer' : ''
|
|
const baseClass = 'card'
|
|
return [baseClass, paddingClass, toneClass, interactiveClass].filter(Boolean).join(' ')
|
|
})
|
|
</script>
|