71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<template>
|
|
<header
|
|
class="flex | text-center"
|
|
:style="'--image: url(\'' + inspiration.cover + '\');'"
|
|
>
|
|
<!-- $inspiration->cover()->url() -->
|
|
<h2
|
|
class="inspiration__title | font-serif | text-lg"
|
|
:class="{ new: inspiration.new }"
|
|
>
|
|
{{ inspiration.title }}
|
|
</h2>
|
|
<!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
|
|
<time
|
|
class="inspiration__date | font-medium | text-sm"
|
|
datatime="2024-04"
|
|
>{{ frenchFormattedDate }}</time
|
|
>
|
|
<!-- $inspiration->date() -->
|
|
<p class="inspiration__description">
|
|
{{ inspiration.description }}
|
|
</p>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
import "dayjs/locale/fr";
|
|
|
|
const { inspiration } = defineProps({
|
|
inspiration: Object,
|
|
});
|
|
|
|
dayjs.locale("fr");
|
|
|
|
const frenchFormattedDate = dayjs(inspiration.date).format("MMMM YYYY");
|
|
</script>
|
|
|
|
<style scoped>
|
|
.inspiration > header {
|
|
--direction: column;
|
|
--justify: center;
|
|
--row-gap: var(--space-8);
|
|
clear: both;
|
|
height: 15rem; /* 240px */
|
|
background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
|
|
var(--image);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
margin-bottom: var(--space-16);
|
|
border-radius: var(--rounded-lg);
|
|
}
|
|
.inspiration__title.new::after {
|
|
content: "Nouveauté";
|
|
display: inline-block;
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
border-radius: var(--rounded-sm);
|
|
background-color: var(--color-primary-10);
|
|
color: var(--color-primary-100);
|
|
margin-left: var(--space-16);
|
|
padding: var(--space-4) var(--space-12);
|
|
transform: translateY(-0.1em);
|
|
}
|
|
.inspiration__date,
|
|
.inspiration__description {
|
|
color: var(--color-grey-700);
|
|
}
|
|
</style>
|