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

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
</>
)}