feat: add visual eyecatcher to session detail header
This commit is contained in:
@@ -35,6 +35,7 @@ interface SessionTasting {
|
||||
id: string;
|
||||
name: string;
|
||||
distillery: string;
|
||||
image_url?: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -83,8 +84,9 @@ export default function SessionDetailPage() {
|
||||
// Fetch Tastings in this session
|
||||
const { data: tastingData } = await supabase
|
||||
.from('tastings')
|
||||
.select('id, rating, bottles(id, name, distillery)')
|
||||
.eq('session_id', id);
|
||||
.select('id, rating, bottles(id, name, distillery, image_url)')
|
||||
.eq('session_id', id)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
setTastings((tastingData as any)?.map((t: any) => ({
|
||||
id: t.id,
|
||||
@@ -181,36 +183,66 @@ export default function SessionDetailPage() {
|
||||
</Link>
|
||||
|
||||
{/* Hero */}
|
||||
<header className="bg-white dark:bg-zinc-900 rounded-3xl p-8 border border-zinc-200 dark:border-zinc-800 shadow-xl relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-8 opacity-5">
|
||||
<header className="bg-white dark:bg-zinc-900 rounded-3xl p-8 border border-zinc-200 dark:border-zinc-800 shadow-xl relative overflow-hidden group">
|
||||
{/* Visual Eyecatcher: Background Glow */}
|
||||
{tastings.length > 0 && tastings[0].bottles.image_url && (
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full opacity-20 dark:opacity-30 pointer-events-none">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center scale-150 blur-3xl transition-all duration-1000 group-hover:scale-125"
|
||||
style={{ backgroundImage: `url(${tastings[0].bottles.image_url})` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute top-0 right-0 p-8 opacity-5 text-zinc-400">
|
||||
<GlassWater size={120} />
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
|
||||
<Sparkles size={14} />
|
||||
Tasting Session
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
|
||||
{session.name}
|
||||
</h1>
|
||||
<div className="flex flex-wrap items-center gap-3 sm:gap-6 text-zinc-500 font-bold text-sm">
|
||||
<span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
||||
<Calendar size={16} className="text-amber-600" />
|
||||
{new Date(session.scheduled_at).toLocaleDateString('de-DE')}
|
||||
</span>
|
||||
{participants.length > 0 && (
|
||||
<div className="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
||||
<Users size={16} className="text-amber-600" />
|
||||
<AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
|
||||
|
||||
<div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
||||
<div className="flex-1 flex flex-col md:flex-row gap-6 items-start md:items-center">
|
||||
{/* Visual Eyecatcher: Bottle Preview */}
|
||||
{tastings.length > 0 && tastings[0].bottles.image_url && (
|
||||
<div className="shrink-0 relative">
|
||||
<div className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-white dark:bg-zinc-800 border-2 border-amber-500/20 shadow-2xl overflow-hidden relative group-hover:rotate-3 transition-transform duration-500">
|
||||
<img
|
||||
src={tastings[0].bottles.image_url}
|
||||
alt={tastings[0].bottles.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
)}
|
||||
{tastings.length > 0 && (
|
||||
<span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm transition-all animate-in fade-in slide-in-from-left-2">
|
||||
<GlassWater size={16} className="text-amber-600" />
|
||||
{tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
|
||||
<div className="absolute -bottom-2 -right-2 bg-amber-600 text-white text-[10px] font-black px-2 py-1 rounded-lg shadow-lg rotate-12">
|
||||
LATEST
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
|
||||
<Sparkles size={14} />
|
||||
Tasting Session
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
|
||||
{session.name}
|
||||
</h1>
|
||||
<div className="flex flex-wrap items-center gap-3 sm:gap-6 text-zinc-500 font-bold text-sm">
|
||||
<span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
||||
<Calendar size={16} className="text-amber-600" />
|
||||
{new Date(session.scheduled_at).toLocaleDateString('de-DE')}
|
||||
</span>
|
||||
)}
|
||||
{participants.length > 0 && (
|
||||
<div className="flex items-center gap-2 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
||||
<Users size={16} className="text-amber-600" />
|
||||
<AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
|
||||
</div>
|
||||
)}
|
||||
{tastings.length > 0 && (
|
||||
<span className="flex items-center gap-1.5 bg-zinc-50 dark:bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm transition-all animate-in fade-in slide-in-from-left-2">
|
||||
<GlassWater size={16} className="text-amber-600" />
|
||||
{tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user