robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add visual eyecatcher to session detail header

Browse Source
This commit is contained in:
robin
2025-12-18 21:38:10 +01:00
parent ec9468f671
commit 6f32bfa17f
1 changed files with 60 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/sessions/[id]/page.tsx
View File

@@ -35,6 +35,7 @@ interface SessionTasting {
id: string; id: string;
name: string; name: string;
distillery: string; distillery: string;
image_url?: string | null;
}; };
} }
@@ -83,8 +84,9 @@ export default function SessionDetailPage() {
// Fetch Tastings in this session // Fetch Tastings in this session
const { data: tastingData } = await supabase const { data: tastingData } = await supabase
.from('tastings') .from('tastings')
.select('id, rating, bottles(id, name, distillery)') .select('id, rating, bottles(id, name, distillery, image_url)')
.eq('session_id', id); .eq('session_id', id)
.order('created_at', { ascending: false });
setTastings((tastingData as any)?.map((t: any) => ({ setTastings((tastingData as any)?.map((t: any) => ({
id: t.id, id: t.id,
@@ -181,11 +183,40 @@ export default function SessionDetailPage() {
</Link> </Link>
{/* Hero */} {/* 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"> <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">
<div className="absolute top-0 right-0 p-8 opacity-5"> {/* 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} /> <GlassWater size={120} />
</div> </div>
<div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
<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>
<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="space-y-2">
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest"> <div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
<Sparkles size={14} /> <Sparkles size={14} />
@@ -213,6 +244,7 @@ export default function SessionDetailPage() {
)} )}
</div> </div>
</div> </div>
</div>
<div className="flex gap-2"> <div className="flex gap-2">
{activeSession?.id !== session.id ? ( {activeSession?.id !== session.id ? (