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

feat: enhance UI components (replace sliders with daisyUI range, hide tabs scrollbar, add product reviews tab, adjust banner positioning)

Browse Source
This commit is contained in:
AI Assistant
2026-07-19 12:51:00 +02:00
parent d64266243e
commit 2060990ab9
3 changed files with 47 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/shop/ProductsGrid.tsx
+4 -26
View File
@@ -348,24 +348,13 @@ export function ProductsGrid({ products, brands }: ProductsGridProps) {
<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
<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"
className="range range-xs range-accent w-full"
/>
<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>
{/* do */}
<div className="flex flex-col gap-1.5">
@@ -373,24 +362,13 @@ export function ProductsGrid({ products, brands }: ProductsGridProps) {
<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
<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"
className="range range-xs range-accent w-full"
/>
<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>