generated from gitea_admin/default
88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
<template>
|
|
<DsCard class="concert-card">
|
|
<div class="concert-card__grid">
|
|
<!-- Image -->
|
|
<div class="concert-card__media">
|
|
<DsMedia :src="imageUrl" :alt="imageAlt" ratio="square" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="concert-card__content">
|
|
<DsHeading as="h4" tone="default" class="concert-card__title">
|
|
{{ title }}
|
|
</DsHeading>
|
|
|
|
<!-- Meta : date + lieu -->
|
|
<div class="concert-card__meta">
|
|
<DsHeading as="h5" tone="default">
|
|
{{ venue }}
|
|
</DsHeading>
|
|
<DsHeading as="h6" tone="default">
|
|
<time :datetime="dateISO">{{ dateLabel }}</time>
|
|
</DsHeading>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<DsText as="p" tone="default" :clamp="3" class="concert-card__description">
|
|
{{ description }}
|
|
</DsText>
|
|
|
|
<!-- Actions -->
|
|
<div class="concert-card__actions">
|
|
<DsButtonArrow :to="`/concerts/${id}`" variant="secondary">
|
|
Réserver
|
|
</DsButtonArrow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DsCard>
|
|
</template>
|
|
|
|
<script setup>
|
|
import DsCard from '@root/design-system/components/DsCard.vue'
|
|
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
|
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
|
import DsText from '@root/design-system/primitives/DsText.vue'
|
|
import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
|
|
|
|
|
|
defineProps({
|
|
id: { type: [String, Number], required: true },
|
|
title: { type: String, required: true },
|
|
venue: { type: String, required: true },
|
|
dateISO: { type: String, required: true }, // ex: "2026-01-15T20:00:00+01:00"
|
|
dateLabel: { type: String, required: true }, // ex: "Jeu. 15 jan. 2026 — 20h"
|
|
description: { type: String, default: '' },
|
|
imageUrl: { type: String, default: '' },
|
|
imageAlt: { type: String, default: '' },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.concert-card__grid {
|
|
display: grid;
|
|
gap: var(--sp-16);
|
|
align-items: start;
|
|
}
|
|
|
|
.concert-card__content {
|
|
display: grid;
|
|
gap: var(--sp-6);
|
|
max-width: 518px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.concert-card__meta {
|
|
margin-top: calc(var(--sp-4) * -1);
|
|
}
|
|
.concert-card__description {
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.concert-card__actions {
|
|
margin-top: auto;
|
|
}
|
|
|
|
</style> |