78 lines
2.0 KiB
Vue
78 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
class="border-linen flex flex-col items-center gap-6 rounded-lg border bg-white p-6 shadow-sm transition-all duration-300 hover:shadow-md md:flex-row md:gap-8 md:p-8"
|
|
>
|
|
<div class="relative">
|
|
<div
|
|
class="h-56 w-36 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105 sm:h-64 sm:w-40 md:h-72 md:w-48"
|
|
:style="{
|
|
'background-image': `url(${cardImage})`,
|
|
'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)',
|
|
transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
|
|
}"
|
|
></div>
|
|
<div
|
|
v-if="orientation === 'reversed'"
|
|
class="absolute top-2 right-2 rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
|
|
>
|
|
Inversée
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3 text-center md:text-left">
|
|
<p class="text-spiritual-earth text-xs font-semibold tracking-widest uppercase sm:text-sm">
|
|
Carte
|
|
</p>
|
|
<h3 class="text-midnight-blue text-xl leading-tight font-bold sm:text-2xl">
|
|
{{ name }}
|
|
</h3>
|
|
<div class="text-midnight-blue/80 text-sm leading-relaxed sm:text-base" v-html="description"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { resolveCardImage } from '@/utils/resolveCardImage';
|
|
import { computed } from 'vue';
|
|
|
|
interface Props {
|
|
cardId: number | string;
|
|
assetId?: number | null;
|
|
fallbackIndex?: number;
|
|
name: string;
|
|
imageUrl: string | null;
|
|
orientation?: string;
|
|
description: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const cardImage = computed(() =>
|
|
resolveCardImage(
|
|
{
|
|
id: props.cardId,
|
|
asset_id: props.assetId ?? null,
|
|
image_url: props.imageUrl,
|
|
},
|
|
props.fallbackIndex,
|
|
),
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
div {
|
|
animation: slideUp 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(15px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|