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

feat: add tasting sorting and polish UI with premium aesthetic

Browse Source
This commit is contained in:
robin
2025-12-17 23:18:07 +01:00
parent 19689ffd2f
commit 939d69a634
68 changed files with 1004 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/bottles/[id]/page.tsx
View File

@@ -5,6 +5,7 @@ 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';
import TastingList from '@/components/TastingList';
export default async function BottlePage({ params }: { params: { id: string } }) {
const supabase = createServerComponentClient({ cookies });
@@ -129,58 +130,8 @@ export default async function BottlePage({ params }: { params: { id: string } })
</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 className="lg:col-span-2">
<TastingList initialTastings={tastings || []} />
</div>
</div>
</section>