init
This commit is contained in:
150
src/components/TastingNoteForm.tsx
Normal file
150
src/components/TastingNoteForm.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { saveTasting } from '@/services/save-tasting';
|
||||
import { Loader2, Send } from 'lucide-react';
|
||||
|
||||
interface TastingNoteFormProps {
|
||||
bottleId: string;
|
||||
}
|
||||
|
||||
export default function TastingNoteForm({ bottleId }: TastingNoteFormProps) {
|
||||
const [rating, setRating] = useState(85);
|
||||
const [nose, setNose] = useState('');
|
||||
const [palate, setPalate] = useState('');
|
||||
const [finish, setFinish] = useState('');
|
||||
const [isSample, setIsSample] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await saveTasting({
|
||||
bottle_id: bottleId,
|
||||
rating,
|
||||
nose_notes: nose,
|
||||
palate_notes: palate,
|
||||
finish_notes: finish,
|
||||
is_sample: isSample,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
setNose('');
|
||||
setPalate('');
|
||||
setFinish('');
|
||||
// We don't need to manually refresh because of revalidatePath in the server action
|
||||
} else {
|
||||
setError(result.error || 'Fehler beim Speichern');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Ein unerwarteter Fehler ist aufgetreten');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
<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"
|
||||
/>
|
||||
<div className="flex justify-between text-[10px] text-zinc-400 font-bold uppercase tracking-widest">
|
||||
<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">
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
Bottle
|
||||
</button>
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
Sample
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Nose</label>
|
||||
<textarea
|
||||
value={nose}
|
||||
onChange={(e) => setNose(e.target.value)}
|
||||
placeholder="Aromen in der Nase..."
|
||||
rows={2}
|
||||
className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Palate</label>
|
||||
<textarea
|
||||
value={palate}
|
||||
onChange={(e) => setPalate(e.target.value)}
|
||||
placeholder="Geschmack am Gaumen..."
|
||||
rows={2}
|
||||
className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Finish</label>
|
||||
<textarea
|
||||
value={finish}
|
||||
onChange={(e) => setFinish(e.target.value)}
|
||||
placeholder="Nachhall..."
|
||||
rows={2}
|
||||
className="w-full p-3 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 outline-none resize-none transition-all dark:text-zinc-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs rounded-lg border border-red-100 dark:border-red-900/50">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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"
|
||||
>
|
||||
{loading ? <Loader2 className="animate-spin" size={20} /> : (
|
||||
<>
|
||||
<Send size={18} />
|
||||
Note Speichern
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user