5115a4db82
- Introduced ProductCard component to display individual product details, including image, title, description, price, and optional badges. - Added ProductGrid component to create a flexible grid layout for displaying multiple ProductCard components, supporting 1-4 columns. - Created a demo page to showcase the ProductCard and ProductGrid components in action, highlighting their responsive design and features. - Updated styleguide to include links and descriptions for the new components.
67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<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>
|