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

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'
}`}
>