danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
hamid zarghami
2025-09-03 15:06:15 +03:30
parent 138f26e293
commit d051e7110a
33 changed files with 440 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CartControls.tsx
+9 -12
View File
@@ -21,41 +21,38 @@ export default function CartControls(props: CartControlsProps) {
const orange = "blue";
return (
<div className={"flex items-center gap-4 " + (className ?? "")}>
<div className="h-12 rounded-xl border border-border bg-white px-4 min-w-[138px] flex items-center justify-between">
<div className={"flex items-center gap-2 sm:gap-4 " + (className ?? "")}>
<div className="h-10 sm:h-12 rounded-lg sm:rounded-xl border border-border bg-white px-2 sm:px-4 min-w-[100px] sm:min-w-[138px] flex items-center justify-between">
<button
type="button"
onClick={() => canIncrement && onChange(quantity + 1)}
className="disabled:opacity-40 disabled:cursor-not-allowed"
className="disabled:opacity-40 disabled:cursor-not-allowed p-1"
disabled={!canIncrement}
aria-label="increase quantity"
>
<Add size={22} color={orange} />
<Add size={18} color={orange} className="sm:w-5 sm:h-5" />
</button>
<span className="text-[18px] font-medium" style={{ color: orange }}>
<span className="text-sm sm:text-[18px] font-medium" style={{ color: orange }}>
{quantity}
</span>
<button
type="button"
onClick={() => canDecrement && onChange(quantity - 1)}
className="disabled:opacity-40 disabled:cursor-not-allowed"
className="disabled:opacity-40 disabled:cursor-not-allowed p-1"
disabled={!canDecrement}
aria-label="decrease quantity"
>
<Minus size={22} color={orange} />
<Minus size={18} color={orange} className="sm:w-5 sm:h-5" />
</button>
</div>
<button
type="button"
onClick={onRemove}
className="h-12 w-12 rounded-xl border border-border grid place-items-center bg-white"
className="h-10 w-10 sm:h-12 sm:w-12 rounded-lg sm:rounded-xl border border-border grid place-items-center bg-white"
aria-label="remove from cart"
>
<Trash size={22} color="#AD3434" />
<Trash size={18} color="#AD3434" className="sm:w-5 sm:h-5" />
</button>
</div>
);