176 lines
8.5 KiB
TypeScript
176 lines
8.5 KiB
TypeScript
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
|
|
import { cookies } from 'next/headers';
|
|
import { notFound } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Package, PlusCircle } from 'lucide-react';
|
|
import { getStorageUrl } from '@/lib/supabase';
|
|
import TastingNoteForm from '@/components/TastingNoteForm';
|
|
import StatusSwitcher from '@/components/StatusSwitcher';
|
|
import TastingList from '@/components/TastingList';
|
|
import DeleteBottleButton from '@/components/DeleteBottleButton';
|
|
import EditBottleForm from '@/components/EditBottleForm';
|
|
import { validateSession } from '@/services/validate-session';
|
|
|
|
export default async function BottlePage({
|
|
params,
|
|
searchParams
|
|
}: {
|
|
params: { id: string },
|
|
searchParams: { session_id?: string }
|
|
}) {
|
|
let sessionId = searchParams.session_id;
|
|
|
|
// Validate Session Age (12 hour limit)
|
|
if (sessionId) {
|
|
const isValid = await validateSession(sessionId);
|
|
if (!isValid) {
|
|
sessionId = undefined;
|
|
}
|
|
}
|
|
const supabase = createServerComponentClient({ cookies });
|
|
|
|
const { data: bottle } = await supabase
|
|
.from('bottles')
|
|
.select('*')
|
|
.eq('id', params.id)
|
|
.single();
|
|
|
|
if (!bottle) {
|
|
notFound();
|
|
}
|
|
|
|
const { data: tastings } = await supabase
|
|
.from('tastings')
|
|
.select(`
|
|
*,
|
|
tasting_sessions (
|
|
id,
|
|
name
|
|
),
|
|
tasting_tags (
|
|
buddies (
|
|
id,
|
|
name
|
|
)
|
|
)
|
|
`)
|
|
.eq('bottle_id', params.id)
|
|
.order('created_at', { ascending: false });
|
|
|
|
return (
|
|
<main className="min-h-screen bg-zinc-50 dark:bg-black p-4 md:p-12 lg:p-24">
|
|
<div className="max-w-4xl mx-auto space-y-6 md:space-y-12">
|
|
{/* Back Button */}
|
|
<Link
|
|
href={`/${sessionId ? `?session_id=${sessionId}` : ''}`}
|
|
className="inline-flex items-center gap-2 text-zinc-500 hover:text-amber-600 transition-colors font-medium mb-4"
|
|
>
|
|
<ChevronLeft size={20} />
|
|
Zurück zur Sammlung
|
|
</Link>
|
|
|
|
|
|
{/* Hero Section */}
|
|
<section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
|
|
<div className="aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl border border-zinc-200 dark:border-zinc-800">
|
|
<img
|
|
src={getStorageUrl(bottle.image_url)}
|
|
alt={bottle.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl md:text-4xl font-black text-zinc-900 dark:text-white tracking-tighter leading-tight">
|
|
{bottle.name}
|
|
</h1>
|
|
<p className="text-sm md:text-xl text-amber-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
|
|
|
|
{bottle.whiskybase_id && (
|
|
<div className="mt-4">
|
|
<a
|
|
href={`https://www.whiskybase.com/whiskies/whisky/${bottle.whiskybase_id}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-[#db0000] text-white rounded-xl text-sm font-bold shadow-lg shadow-red-600/20 hover:scale-[1.05] transition-transform"
|
|
>
|
|
<ExternalLink size={16} />
|
|
Whiskybase ID: {bottle.whiskybase_id}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm flex flex-col justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
|
|
<Tag size={14} /> Kategorie
|
|
</div>
|
|
<div className="font-semibold dark:text-zinc-200">{bottle.category || '-'}</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
|
<div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
|
|
<Droplets size={14} /> Alkoholgehalt
|
|
</div>
|
|
<div className="font-semibold dark:text-zinc-200">{bottle.abv}% Vol.</div>
|
|
</div>
|
|
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
|
<div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
|
|
<Award size={14} /> Alter
|
|
</div>
|
|
<div className="font-semibold dark:text-zinc-200">{bottle.age ? `${bottle.age} Jahre` : '-'}</div>
|
|
</div>
|
|
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
|
<div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
|
|
<Calendar size={14} /> Zuletzt verkostet
|
|
</div>
|
|
<div className="font-semibold dark:text-zinc-200">
|
|
{tastings && tastings.length > 0
|
|
? new Date(tastings[0].created_at).toLocaleDateString('de-DE')
|
|
: 'Noch nie'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 space-y-4">
|
|
<StatusSwitcher bottleId={bottle.id} currentStatus={bottle.status} />
|
|
<EditBottleForm bottle={bottle} />
|
|
<DeleteBottleButton bottleId={bottle.id} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr className="border-zinc-200 dark:border-zinc-800" />
|
|
|
|
{/* Tasting Notes Section */}
|
|
<section className="space-y-8">
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
|
|
<div>
|
|
<h2 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">Tasting Notes</h2>
|
|
<p className="text-zinc-500 mt-1">Hier findest du deine bisherigen Eindrücke.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 items-start">
|
|
{/* Form */}
|
|
<div className="lg:col-span-1 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 bg-white dark:bg-zinc-900/50 md:sticky md:top-24">
|
|
<h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-amber-600">
|
|
<Droplets size={20} /> Dram bewerten
|
|
</h3>
|
|
<TastingNoteForm bottleId={bottle.id} sessionId={sessionId} />
|
|
</div>
|
|
|
|
{/* List */}
|
|
<div className="lg:col-span-2">
|
|
<TastingList initialTastings={tastings || []} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|