You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.3 KiB
66 lines
1.3 KiB
<script setup lang="ts">
|
|
import { cn } from '~/lib/utils'
|
|
|
|
interface Props {
|
|
/**
|
|
* Grid title (e.g., "Unsere Jahreskarten")
|
|
*/
|
|
title?: string
|
|
/**
|
|
* Grid description/subtitle
|
|
*/
|
|
description?: string
|
|
/**
|
|
* Number of columns on desktop (default: 3)
|
|
*/
|
|
columns?: 1 | 2 | 3 | 4
|
|
/**
|
|
* Additional CSS classes
|
|
*/
|
|
class?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
columns: 3,
|
|
})
|
|
|
|
// Generate grid column classes
|
|
const gridClass = computed(() => {
|
|
const colMap = {
|
|
1: 'md:grid-cols-1',
|
|
2: 'md:grid-cols-2',
|
|
3: 'md:grid-cols-3',
|
|
4: 'md:grid-cols-4',
|
|
}
|
|
return colMap[props.columns]
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section :class="cn('w-full', props.class)">
|
|
<!-- Section Header -->
|
|
<div v-if="title || description" class="mb-8 text-center">
|
|
<h2
|
|
v-if="title"
|
|
class="mb-3 text-3xl font-bold text-white md:text-4xl"
|
|
>
|
|
{{ title }}
|
|
</h2>
|
|
<p v-if="description" class="mx-auto max-w-2xl text-base text-white/80 md:text-lg">
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Product Grid -->
|
|
<div
|
|
:class="
|
|
cn(
|
|
'grid grid-cols-1 gap-6 sm:grid-cols-2',
|
|
gridClass,
|
|
)
|
|
"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|