michal.cukrowski/thermcool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: drobne poprawki UI i naprawa builda

Browse Source
This commit is contained in:
AI Assistant
2026-07-05 13:16:59 +02:00
parent 41ed8876b4
commit a0eb555e22
11 changed files with 71 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/shop/ProductsGrid.tsx
+49 -31
View File
@@ -342,38 +342,56 @@ export function ProductsGrid({ products, brands }: ProductsGridProps) {
{/* Głośność */}
<Accordion title={`Głośność wewnętrzna (dB) — ${halasMin}–${halasMax} dB`}>
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<span className="text-xs text-text-muted w-8">od</span>
<input
type="range"
min={15}
max={50}
value={halasMin}
onChange={e => {
const val = Number(e.target.value);
setHalasMin(Math.min(val, halasMax - 1));
setPage(1);
}}
className="flex-1 accent-accent cursor-pointer"
/>
<span className="text-xs text-primary font-medium w-10 text-right">{halasMin} dB</span>
<div className="flex flex-col gap-4 px-1">
{/* od */}
<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between">
<span className="text-xs text-text-muted">od</span>
<span className="text-xs font-bold text-primary bg-accent/10 px-2 py-0.5 rounded-md">{halasMin} dB</span>
</div>
<div className="relative h-5 flex items-center">
<div className="absolute w-full h-1.5 bg-slate-200 rounded-full" />
<div
className="absolute h-1.5 bg-accent rounded-full"
style={{ left: `${((halasMin - 15) / 35) * 100}%`, right: `${100 - ((halasMax - 15) / 35) * 100}%` }}
/>
<input
type="range"
min={15} max={50}
value={halasMin}
onChange={e => { setHalasMin(Math.min(Number(e.target.value), halasMax - 1)); setPage(1); }}
className="absolute w-full h-1.5 opacity-0 cursor-pointer z-10"
/>
<div
className="absolute size-4 bg-white border-2 border-accent rounded-full shadow-md pointer-events-none"
style={{ left: `calc(${((halasMin - 15) / 35) * 100}% - 8px)` }}
/>
</div>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-text-muted w-8">do</span>
<input
type="range"
min={15}
max={50}
value={halasMax}
onChange={e => {
const val = Number(e.target.value);
setHalasMax(Math.max(val, halasMin + 1));
setPage(1);
}}
className="flex-1 accent-accent cursor-pointer"
/>
<span className="text-xs text-primary font-medium w-10 text-right">{halasMax} dB</span>
{/* do */}
<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between">
<span className="text-xs text-text-muted">do</span>
<span className="text-xs font-bold text-primary bg-accent/10 px-2 py-0.5 rounded-md">{halasMax} dB</span>
</div>
<div className="relative h-5 flex items-center">
<div className="absolute w-full h-1.5 bg-slate-200 rounded-full" />
<div
className="absolute h-1.5 bg-accent rounded-full"
style={{ left: `${((halasMin - 15) / 35) * 100}%`, right: `${100 - ((halasMax - 15) / 35) * 100}%` }}
/>
<input
type="range"
min={15} max={50}
value={halasMax}
onChange={e => { setHalasMax(Math.max(Number(e.target.value), halasMin + 1)); setPage(1); }}
className="absolute w-full h-1.5 opacity-0 cursor-pointer z-10"
/>
<div
className="absolute size-4 bg-white border-2 border-accent rounded-full shadow-md pointer-events-none"
style={{ left: `calc(${((halasMax - 15) / 35) * 100}% - 8px)` }}
/>
</div>
</div>
</div>
</Accordion>