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>
);
src/components/CartSummary.tsx
+9 -9
View File
@@ -22,8 +22,8 @@ const Row: FC<{ label: string; value: string | number; emphasize?: boolean }> =
) => {
return (
<div className="flex items-center justify-between text-[#333333]">
<div className="text-sm font-light">{label}</div>
<div className={emphasize ? "font-semibold" : "font-light"}>
<div className="text-xs sm:text-sm font-light">{label}</div>
<div className={`text-sm sm:text-base ${emphasize ? "font-semibold" : "font-light"}`}>
{typeof value === "number" ? NumberFormat(value) : value}
</div>
</div>
@@ -34,30 +34,30 @@ const CartSummary: FC<CartSummaryProps> = (props) => {
const { itemsCount, itemsPrice, discount, total, onConfirm, onDownloadInvoice, className, confirmHref, confirmLabel } = props;
return (
<div className={"rounded-2xl border border-border p-6 h-fit bg-[#FAFAFA] " + (className ?? "")}>
<div className={"rounded-xl sm:rounded-2xl border border-border p-4 sm:p-6 h-fit bg-[#FAFAFA] " + (className ?? "")}>
<div className="flex items-center justify-between">
<div className="text-sm text-muted-foreground">تعداد کالاها</div>
<div>{NumberFormat(itemsCount)} محصول</div>
<div className="text-xs sm:text-sm text-muted-foreground">تعداد کالاها</div>
<div className="text-sm sm:text-base font-medium">{NumberFormat(itemsCount)} محصول</div>
</div>
<div className="mt-6 space-y-5">
<div className="mt-4 sm:mt-6 space-y-3 sm:space-y-5">
<Row label="قیمت کالاها" value={itemsPrice} />
<Row label="تخفیف" value={discount} />
<Row label="جمع فاکتور" value={total} emphasize />
</div>
<div className="mt-8 space-y-3">
<div className="mt-6 sm:mt-8 space-y-2 sm:space-y-3">
<Button
type="button"
onClick={() => onDownloadInvoice?.()}
className="w-full h-12 rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90"
className="w-full h-10 sm:h-12 rounded-lg sm:rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90 text-sm sm:text-base"
>
دانلود پیش‌فاکتور
</Button>
<Button
type="button"
onClick={() => !confirmHref && onConfirm?.()}
className="w-full h-12 rounded-xl text-white"
className="w-full h-10 sm:h-12 rounded-lg sm:rounded-xl text-white text-sm sm:text-base"
>
{confirmHref ? (
<Link href={confirmHref} className="w-full h-full flex items-center justify-center">