Revoir le layout mobile de l'agenda : date et lieu lisibles, affiche en repère visuel
This commit is contained in:
parent
0f27f1bb7d
commit
fe539d4f4a
1 changed files with 104 additions and 48 deletions
|
|
@ -32,64 +32,120 @@ const now = new Date();
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
class:list={[
|
class:list={[
|
||||||
'fade-up group relative flex flex-col md:flex-row md:items-center gap-5 md:gap-8 p-5 md:p-6 rounded-[28px] md:rounded-[32px] border transition-all overflow-hidden',
|
'fade-up group relative rounded-[28px] md:rounded-[32px] border transition-all overflow-hidden',
|
||||||
isPast
|
isPast
|
||||||
? 'opacity-40 grayscale bg-night/5 border-transparent'
|
? 'opacity-40 grayscale bg-night/5 border-transparent'
|
||||||
: 'bg-white border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 hover:scale-[1.01]',
|
: 'bg-white border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 hover:scale-[1.01]',
|
||||||
]}
|
]}
|
||||||
style={`transition-delay: ${index * 0.1}s`}
|
style={`transition-delay: ${index * 0.1}s`}
|
||||||
>
|
>
|
||||||
<!-- Date -->
|
{/* Mobile */}
|
||||||
<div class="flex-shrink-0 flex flex-col items-center justify-center w-16 h-24 md:w-20 md:h-28 rounded-xl md:rounded-2xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg">
|
<div class="md:hidden flex flex-row items-center gap-3 p-3">
|
||||||
<span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80">
|
{/* Date — info principale */}
|
||||||
{dateObj.toLocaleString('fr-FR', { month: 'short' })}
|
<div class="flex-shrink-0 flex flex-col items-center justify-center w-18 h-22 rounded-xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg px-2 py-2">
|
||||||
</span>
|
<span class="font-sans text-[10px] font-bold uppercase tracking-widest opacity-80">
|
||||||
<span class="font-display text-3xl md:text-4xl leading-none">
|
{dateObj.toLocaleString('fr-FR', { month: 'short' })}
|
||||||
{dateObj.getDate()}
|
</span>
|
||||||
</span>
|
<span class="font-display text-3xl leading-none">
|
||||||
<span class="font-sans text-[10px] md:text-xs font-bold opacity-60">
|
{dateObj.getDate()}
|
||||||
{dateObj.getFullYear()}
|
</span>
|
||||||
</span>
|
<span class="font-sans text-[10px] font-bold opacity-60">
|
||||||
</div>
|
{dateObj.getFullYear()}
|
||||||
|
</span>
|
||||||
<!-- Info Block -->
|
|
||||||
<div class="flex-grow flex flex-col justify-center space-y-1.5 md:space-y-2">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
{isPast && <span class="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>}
|
|
||||||
</div>
|
</div>
|
||||||
<h3 class="font-display text-xl md:text-3xl text-night leading-tight">{spectacle?.title}</h3>
|
|
||||||
<div class="flex items-center gap-2 text-night/50 font-sans font-bold text-[10px] md:text-sm uppercase tracking-widest">
|
|
||||||
<Icon name="lucide:map-pin" size={14} class="text-dream-blue" />
|
|
||||||
<span>{event.location}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Action Block -->
|
{/* Titre + lieu */}
|
||||||
{event.bookingLink && (
|
<div class="flex-grow min-w-0 space-y-1">
|
||||||
<div class="flex-shrink-0 flex items-center">
|
{isPast && (
|
||||||
<a
|
<span class="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>
|
||||||
href={event.bookingLink}
|
)}
|
||||||
target="_blank"
|
<h3 class="font-display text-lg text-night leading-tight truncate">{spectacle?.title}</h3>
|
||||||
rel="noreferrer"
|
<div class="flex items-start gap-1.5 text-night/60 font-sans text-sm">
|
||||||
class="w-full md:w-auto flex items-center justify-center gap-3 bg-night text-cloud px-6 py-3 md:px-8 md:py-4 rounded-full font-sans font-bold text-sm uppercase tracking-widest hover:bg-night/80 transition-all hover:scale-105 shadow-lg shadow-night/20"
|
<Icon name="lucide:map-pin" size={14} class="text-dream-blue flex-shrink-0 mt-0.5" />
|
||||||
>
|
<span>{event.location}</span>
|
||||||
<Icon name="lucide:ticket" size={18} />
|
</div>
|
||||||
Réserver
|
{event.bookingLink && (
|
||||||
|
<a
|
||||||
|
href={event.bookingLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
class="inline-flex items-center gap-1.5 text-dream-coral font-sans font-bold text-xs uppercase tracking-widest"
|
||||||
|
>
|
||||||
|
<Icon name="lucide:ticket" size={14} />
|
||||||
|
Réserver
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Affiche — repère visuel */}
|
||||||
|
{spectacle?.affiche && (
|
||||||
|
<a href={`/spectacles/${spectacle.id}`} class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
src={`${spectacle.affiche}/m/0x200`}
|
||||||
|
alt={`Affiche ${spectacle.title}`}
|
||||||
|
class="w-16 h-24 rounded-xl shadow-sm object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
<!-- Affiche -->
|
{/* Desktop: ligne horizontale */}
|
||||||
{spectacle?.affiche && (
|
<div class="hidden md:flex md:flex-row md:items-center gap-8 p-6">
|
||||||
<a href={`/spectacles/${spectacle.id}`} class="flex-shrink-0 order-first md:order-last">
|
{/* Date */}
|
||||||
<img
|
<div class="flex-shrink-0 flex flex-col items-center justify-center w-20 h-28 rounded-2xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg">
|
||||||
src={`${spectacle.affiche}/m/0x200`}
|
<span class="font-sans text-xs font-bold uppercase tracking-widest opacity-80">
|
||||||
alt={`Affiche ${spectacle.title}`}
|
{dateObj.toLocaleString('fr-FR', { month: 'short' })}
|
||||||
class="w-16 h-24 md:w-20 md:h-28 rounded-xl md:rounded-2xl shadow-md object-cover"
|
</span>
|
||||||
loading="lazy"
|
<span class="font-display text-4xl leading-none">
|
||||||
/>
|
{dateObj.getDate()}
|
||||||
</a>
|
</span>
|
||||||
)}
|
<span class="font-sans text-xs font-bold opacity-60">
|
||||||
|
{dateObj.getFullYear()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info */}
|
||||||
|
<div class="flex-grow flex flex-col justify-center space-y-2">
|
||||||
|
{isPast && (
|
||||||
|
<div>
|
||||||
|
<span class="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h3 class="font-display text-3xl text-night leading-tight">{spectacle?.title}</h3>
|
||||||
|
<div class="flex items-center gap-2 text-night/50 font-sans font-bold text-sm uppercase tracking-widest">
|
||||||
|
<Icon name="lucide:map-pin" size={14} class="text-dream-blue" />
|
||||||
|
<span>{event.location}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action */}
|
||||||
|
{event.bookingLink && (
|
||||||
|
<div class="flex-shrink-0 flex items-center">
|
||||||
|
<a
|
||||||
|
href={event.bookingLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
class="flex items-center justify-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-bold text-sm uppercase tracking-widest hover:bg-night/80 transition-all hover:scale-105 shadow-lg shadow-night/20"
|
||||||
|
>
|
||||||
|
<Icon name="lucide:ticket" size={18} />
|
||||||
|
Réserver
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Affiche */}
|
||||||
|
{spectacle?.affiche && (
|
||||||
|
<a href={`/spectacles/${spectacle.id}`} class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
src={`${spectacle.affiche}/m/0x200`}
|
||||||
|
alt={`Affiche ${spectacle.title}`}
|
||||||
|
class="w-20 h-28 rounded-2xl shadow-md object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue