191 lines
12 KiB
TypeScript
191 lines
12 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 } from 'lucide-react';
|
|
import TastingNoteForm from '@/components/TastingNoteForm';
|
|
import StatusSwitcher from '@/components/StatusSwitcher';
|
|
|
|
export default async function BottlePage({ params }: { params: { id: string } }) {
|
|
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('*')
|
|
.eq('bottle_id', params.id)
|
|
.order('created_at', { ascending: false });
|
|
|
|
return (
|
|
<main className="min-h-screen bg-zinc-50 dark:bg-black p-6 md:p-12 lg:p-24">
|
|
<div className="max-w-4xl mx-auto space-y-12">
|
|
{/* Back Button */}
|
|
<Link
|
|
href="/"
|
|
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={bottle.image_url}
|
|
alt={bottle.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tight leading-tight">
|
|
{bottle.name}
|
|
</h1>
|
|
<p className="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">
|
|
<StatusSwitcher bottleId={bottle.id} currentStatus={bottle.status} />
|
|
</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-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 sticky top-24">
|
|
<h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-amber-600">
|
|
<Droplets size={20} /> Neu Verkosten
|
|
</h3>
|
|
<TastingNoteForm bottleId={bottle.id} />
|
|
</div>
|
|
|
|
{/* List */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{!tastings || tastings.length === 0 ? (
|
|
<div className="text-center py-12 bg-zinc-100 dark:bg-zinc-900/30 rounded-3xl border-2 border-dashed border-zinc-200 dark:border-zinc-800">
|
|
<p className="text-zinc-400 italic">Noch keine Tasting Notes vorhanden. Zeit für ein Glas? 🥃</p>
|
|
</div>
|
|
) : (
|
|
tastings.map((note) => (
|
|
<div key={note.id} className="bg-white dark:bg-zinc-900 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 hover:border-amber-500/30 transition-colors">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-3 py-1 rounded-full text-sm font-black ring-1 ring-amber-500/20">
|
|
{note.rating}/100
|
|
</div>
|
|
<span className={`text-[10px] font-black px-2 py-0.5 rounded uppercase tracking-tighter ${note.is_sample
|
|
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
|
: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
|
}`}>
|
|
{note.is_sample ? 'Sample' : 'Bottle'}
|
|
</span>
|
|
<div className="text-xs text-zinc-500 font-bold bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded">
|
|
{new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
|
|
<Calendar size={12} />
|
|
{new Date(note.created_at).toLocaleDateString('de-DE')}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{note.nose_notes && (
|
|
<div>
|
|
<div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Nose</div>
|
|
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.nose_notes}"</p>
|
|
</div>
|
|
)}
|
|
{note.palate_notes && (
|
|
<div>
|
|
<div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Palate</div>
|
|
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.palate_notes}"</p>
|
|
</div>
|
|
)}
|
|
{note.finish_notes && (
|
|
<div>
|
|
<div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Finish</div>
|
|
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.finish_notes}"</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|