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>

8
src/components/StatusSwitcher.tsx
View File

@@ -41,10 +41,10 @@ export default function StatusSwitcher({ bottleId, currentStatus }: StatusSwitch
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Status</label>
<label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest">Flaschenstatus</label>
{loading && <Loader2 className="animate-spin text-amber-600" size={14} />}
</div>
<div className="grid grid-cols-3 gap-2 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-xl relative">
<div className="grid grid-cols-4 gap-2 p-1 bg-zinc-100 dark:bg-zinc-900/50 rounded-2xl border border-zinc-200/50 dark:border-zinc-800/50">
{options.map((opt) => {
const Icon = opt.icon;
const isActive = status === opt.id;
@@ -54,8 +54,8 @@ export default function StatusSwitcher({ bottleId, currentStatus }: StatusSwitch
type="button"
disabled={loading}
onClick={() => handleStatusChange(opt.id)}
className={`flex flex-col items-center gap-1.5 py-3 px-2 rounded-lg text-[10px] font-black uppercase transition-all border-2 ${isActive
? 'bg-white dark:bg-zinc-700 border-amber-500 text-amber-600 shadow-sm'
className={`flex flex-col items-center gap-1.5 py-3 px-1 rounded-xl text-[9px] font-black uppercase tracking-tight transition-all border-2 ${isActive
? 'bg-white dark:bg-zinc-700 border-amber-500 text-amber-600 shadow-sm ring-1 ring-black/5'
: 'border-transparent text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'
}`}
>

131
src/components/TastingList.tsx Normal file
View File

@@ -0,0 +1,131 @@
'use client';
import React, { useState, useMemo } from 'react';
import { Calendar, Star, ArrowUpDown, Clock } from 'lucide-react';
interface Tasting {
id: string;
rating: number;
nose_notes?: string;
palate_notes?: string;
finish_notes?: string;
is_sample?: boolean;
created_at: string;
}
interface TastingListProps {
initialTastings: Tasting[];
}
export default function TastingList({ initialTastings }: TastingListProps) {
const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'rating-desc' | 'rating-asc'>('date-desc');
const sortedTastings = useMemo(() => {
const result = [...initialTastings];
return result.sort((a, b) => {
switch (sortBy) {
case 'date-desc':
return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
case 'date-asc':
return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
case 'rating-desc':
return b.rating - a.rating;
case 'rating-asc':
return a.rating - b.rating;
default:
return 0;
}
});
}, [initialTastings, sortBy]);
if (!initialTastings || initialTastings.length === 0) {
return (
<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 font-medium">Noch keine Tasting Notes vorhanden. Zeit für ein Glas? 🥃</p>
</div>
);
}
return (
<div className="space-y-6">
<div className="flex justify-end">
<div className="flex items-center gap-2 bg-zinc-100 dark:bg-zinc-900 p-1 rounded-xl border border-zinc-200 dark:border-zinc-800">
<ArrowUpDown size={14} className="ml-2 text-zinc-400" />
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)}
className="bg-transparent border-none text-xs font-bold uppercase tracking-tight focus:ring-0 cursor-pointer pr-8 py-1.5 dark:text-zinc-300"
>
<option value="date-desc">Neueste zuerst</option>
<option value="date-asc">Älteste zuerst</option>
<option value="rating-desc">Beste Bewertung</option>
<option value="rating-asc">Niedrigste Bewertung</option>
</select>
</div>
</div>
<div className="space-y-6">
{sortedTastings.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-all hover:shadow-md group"
>
<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.5 rounded-2xl text-sm font-black ring-1 ring-amber-500/20 flex items-center gap-1.5">
<Star size={14} fill="currentColor" className="text-amber-500" />
{note.rating}/100
</div>
<span className={`text-[10px] font-black px-2 py-0.5 rounded-lg uppercase tracking-tighter ${note.is_sample
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-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-[10px] text-zinc-500 font-bold bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-lg flex items-center gap-1">
<Clock size={10} />
{new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
</div>
</div>
<div className="text-[10px] 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-6 relative">
{/* Visual Divider for MD and up */}
<div className="hidden md:block absolute left-1/3 top-0 bottom-0 w-px bg-zinc-100 dark:bg-zinc-800/50" />
<div className="hidden md:block absolute left-2/3 top-0 bottom-0 w-px bg-zinc-100 dark:bg-zinc-800/50" />
{note.nose_notes && (
<div className="space-y-1">
<div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Nose</div>
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
{note.nose_notes}
</p>
</div>
)}
{note.palate_notes && (
<div className="space-y-1">
<div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Palate</div>
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
{note.palate_notes}
</p>
</div>
)}
{note.finish_notes && (
<div className="space-y-1">
<div className="text-[10px] font-black text-zinc-400 uppercase tracking-widest mb-1">Finish</div>
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic border-l-2 border-zinc-100 dark:border-zinc-800 pl-3">
{note.finish_notes}
</p>
</div>
)}
</div>
</div>
))}
</div>
</div>
);
}

42
src/components/TastingNoteForm.tsx
View File

@@ -2,7 +2,7 @@
import React, { useState } from 'react';
import { saveTasting } from '@/services/save-tasting';
import { Loader2, Send } from 'lucide-react';
import { Loader2, Send, Star } from 'lucide-react';
interface TastingNoteFormProps {
bottleId: string;
@@ -49,34 +49,38 @@ export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
return (
<form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-3">
<label className="block text-sm font-bold text-zinc-700 dark:text-zinc-300 flex justify-between">
Rating <span>{rating}/100</span>
</label>
<div className="space-y-4">
<div className="flex items-center justify-between">
<label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest flex items-center gap-2">
<Star size={14} className="text-amber-500 fill-amber-500" />
Rating
</label>
<span className="text-2xl font-black text-amber-600 tracking-tighter">{rating}<span className="text-zinc-400 text-sm ml-0.5 font-bold">/100</span></span>
</div>
<input
type="range"
min="0"
max="100"
value={rating}
onChange={(e) => setRating(parseInt(e.target.value))}
className="w-full h-2 bg-zinc-200 dark:bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-amber-600"
className="w-full h-1.5 bg-zinc-200 dark:bg-zinc-800 rounded-full appearance-none cursor-pointer accent-amber-600 hover:accent-amber-500 transition-all"
/>
<div className="flex justify-between text-[10px] text-zinc-400 font-bold uppercase tracking-widest">
<div className="flex justify-between text-[9px] text-zinc-400 font-black uppercase tracking-widest px-1">
<span>Swill</span>
<span>Dram</span>
<span>Legendary</span>
</div>
</div>
<div className="space-y-2">
<label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Art der Probe</label>
<div className="grid grid-cols-2 gap-2 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-xl">
<div className="space-y-3">
<label className="text-[11px] font-black text-zinc-400 uppercase tracking-widest">Art der Probe</label>
<div className="grid grid-cols-2 gap-2 p-1 bg-zinc-100 dark:bg-zinc-900/50 rounded-2xl border border-zinc-200/50 dark:border-zinc-800/50">
<button
type="button"
onClick={() => setIsSample(false)}
className={`py-2 px-4 rounded-lg text-sm font-bold transition-all ${!isSample
? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm'
: 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
className={`py-2.5 px-4 rounded-xl text-xs font-black uppercase tracking-tight transition-all pb-3 ${!isSample
? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm ring-1 ring-black/5'
: 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'
}`}
>
Bottle
@@ -84,9 +88,9 @@ export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
<button
type="button"
onClick={() => setIsSample(true)}
className={`py-2 px-4 rounded-lg text-sm font-bold transition-all ${isSample
? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm'
: 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
className={`py-2.5 px-4 rounded-xl text-xs font-black uppercase tracking-tight transition-all pb-3 ${isSample
? 'bg-white dark:bg-zinc-700 text-amber-600 shadow-sm ring-1 ring-black/5'
: 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'
}`}
>
Sample
@@ -136,11 +140,11 @@ export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
<button
type="submit"
disabled={loading}
className="w-full py-4 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 font-bold rounded-2xl flex items-center justify-center gap-2 hover:bg-amber-600 dark:hover:bg-amber-600 hover:text-white transition-all active:scale-[0.98] disabled:opacity-50 shadow-lg"
className="w-full py-4 bg-zinc-900 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-900 font-black uppercase tracking-widest text-xs rounded-2xl flex items-center justify-center gap-3 hover:bg-amber-600 dark:hover:bg-amber-600 hover:text-white transition-all active:scale-[0.98] disabled:opacity-50 shadow-xl shadow-black/10 dark:shadow-amber-900/10"
>
{loading ? <Loader2 className="animate-spin" size={20} /> : (
{loading ? <Loader2 className="animate-spin" size={18} /> : (
<>
<Send size={18} />
<Send size={16} />
Note Speichern
</>
)}