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

fix: corect layout spacing and restore filter functionality

Browse Source
This commit is contained in:
robin
2025-12-18 09:52:07 +01:00
parent a3aa4f8b25
commit 9ba1f8bd56
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/BottleGrid.tsx
View File

@@ -36,7 +36,7 @@ function BottleCard({ bottle }: BottleCardProps) {
const statusStyle = statusConfig[bottle.status as keyof typeof statusConfig] || statusConfig.sealed; const statusStyle = statusConfig[bottle.status as keyof typeof statusConfig] || statusConfig.sealed;
return ( return (
<Link href={`/ bottles / ${bottle.id} `} className="block h-full group"> <Link href={`/bottles/${bottle.id}`} className="block h-full group">
<div className="h-full bg-white dark:bg-zinc-900 rounded-[2rem] overflow-hidden border border-zinc-200 dark:border-zinc-800 shadow-sm transition-all duration-300 hover:shadow-2xl hover:shadow-amber-900/10 hover:-translate-y-1 group-hover:border-amber-500/30"> <div className="h-full bg-white dark:bg-zinc-900 rounded-[2rem] overflow-hidden border border-zinc-200 dark:border-zinc-800 shadow-sm transition-all duration-300 hover:shadow-2xl hover:shadow-amber-900/10 hover:-translate-y-1 group-hover:border-amber-500/30">
<div className="aspect-[4/3] overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative"> <div className="aspect-[4/3] overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative">
<img <img
@@ -53,7 +53,7 @@ function BottleCard({ bottle }: BottleCardProps) {
</div> </div>
)} )}
<div className={`absolute bottom - 3 left - 3 px - 3 py - 1.5 rounded - xl text - [10px] font - black uppercase flex items - center gap - 2 backdrop - blur - md border shadow - lg ${statusStyle.color} `}> <div className={`absolute bottom-3 left-3 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase flex items-center gap-2 backdrop-blur-md border shadow-lg ${statusStyle.color}`}>
<StatusIcon size={12} /> <StatusIcon size={12} />
{statusStyle.label} {statusStyle.label}
</div> </div>
@@ -70,8 +70,8 @@ function BottleCard({ bottle }: BottleCardProps) {
</div> </div>
)} )}
</div> </div>
<h3 className={`font - black text - xl leading - tight group - hover: text - amber - 600 transition - colors line - clamp - 2 min - h - [3.5rem] flex items - center ${bottle.is_whisky === false ? 'text-red-600 dark:text-red-400' : 'text-zinc-900 dark:text-zinc-100' <h3 className={`font-black text-xl leading-tight group-hover:text-amber-600 transition-colors line-clamp-2 min-h-[3.5rem] flex items-center ${bottle.is_whisky === false ? 'text-red-600 dark:text-red-400' : 'text-zinc-900 dark:text-zinc-100'
} `}> }`}>
{bottle.name || 'Unbekannte Flasche'} {bottle.name || 'Unbekannte Flasche'}
</h3> </h3>
</div> </div>
@@ -142,7 +142,7 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
return new Date(b.created_at).getTime() - new Date(a.created_at).getTime(); return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
} }
}); });
}, [bottles, searchQuery, selectedCategory, selectedDistillery, sortBy]); }, [bottles, searchQuery, selectedCategory, selectedDistillery, selectedStatus, sortBy]);
if (!bottles || bottles.length === 0) { if (!bottles || bottles.length === 0) {
return ( return (
@@ -194,10 +194,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
<div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide"> <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
<button <button
onClick={() => setSelectedCategory(null)} onClick={() => setSelectedCategory(null)}
className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedCategory === null className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedCategory === null
? 'bg-amber-600 border-amber-600 text-white shadow-lg shadow-amber-600/20' ? 'bg-amber-600 border-amber-600 text-white shadow-lg shadow-amber-600/20'
: 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400' : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
} `} }`}
> >
ALLE ALLE
</button> </button>
@@ -205,10 +205,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
<button <button
key={cat} key={cat}
onClick={() => setSelectedCategory(cat)} onClick={() => setSelectedCategory(cat)}
className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedCategory === cat className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedCategory === cat
? 'bg-amber-600 border-amber-600 text-white shadow-lg shadow-amber-600/20' ? 'bg-amber-600 border-amber-600 text-white shadow-lg shadow-amber-600/20'
: 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400' : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
} `} }`}
> >
{cat.toUpperCase()} {cat.toUpperCase()}
</button> </button>
@@ -222,10 +222,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
<div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide"> <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
<button <button
onClick={() => setSelectedDistillery(null)} onClick={() => setSelectedDistillery(null)}
className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedDistillery === null className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedDistillery === null
? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white' ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white'
: 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400' : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
} `} }`}
> >
ALLE ALLE
</button> </button>
@@ -233,10 +233,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
<button <button
key={dist} key={dist}
onClick={() => setSelectedDistillery(dist)} onClick={() => setSelectedDistillery(dist)}
className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedDistillery === dist className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedDistillery === dist
? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white' ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 border-zinc-900 dark:border-white'
: 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400' : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
} `} }`}
> >
{dist.toUpperCase()} {dist.toUpperCase()}
</button> </button>
@@ -252,10 +252,10 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
<button <button
key={status} key={status}
onClick={() => setSelectedStatus(selectedStatus === status ? null : status)} onClick={() => setSelectedStatus(selectedStatus === status ? null : status)}
className={`px - 4 py - 2 rounded - xl text - xs font - bold whitespace - nowrap transition - all border ${selectedStatus === status className={`px-4 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all border ${selectedStatus === status
? status === 'open' ? 'bg-amber-500 border-amber-500 text-white' : status === 'sampled' ? 'bg-purple-500 border-purple-500 text-white' : status === 'empty' ? 'bg-zinc-500 border-zinc-500 text-white' : 'bg-blue-600 border-blue-600 text-white' ? status === 'open' ? 'bg-amber-500 border-amber-500 text-white' : status === 'sampled' ? 'bg-purple-500 border-purple-500 text-white' : status === 'empty' ? 'bg-zinc-500 border-zinc-500 text-white' : 'bg-blue-600 border-blue-600 text-white'
: 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400' : 'bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400'
} `} }`}
> >
{status.toUpperCase()} {status.toUpperCase()}
</button> </button>