cart

2025-08-12 15:35:34 +03:30
parent 92370259c1
commit 418b45fde5
12 changed files with 574 additions and 5 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+import { Add, Minus, Trash } from "iconsax-react";
+import React from "react";
+
+type CartControlsProps = {
+    quantity: number;
+    onChange: (next: number) => void;
+    onRemove: () => void;
+    min?: number;
+    max?: number;
+    className?: string;
+};
+
+export default function CartControls(props: CartControlsProps) {
+    const { quantity, onChange, onRemove, min = 1, max, className } = props;
+
+    const canDecrement = quantity > min;
+    const canIncrement = typeof max === "number" ? quantity < max : true;
+
+    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">
+                <button
+                    type="button"
+                    onClick={() => canIncrement && onChange(quantity + 1)}
+                    className="disabled:opacity-40 disabled:cursor-not-allowed"
+                    disabled={!canIncrement}
+                    aria-label="increase quantity"
+                >
+                    <Add size={22} color={orange} />
+                </button>
+                <span className="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"
+                    disabled={!canDecrement}
+                    aria-label="decrease quantity"
+                >
+                    <Minus size={22} color={orange} />
+                </button>
+
+            </div>
+
+            <button
+                type="button"
+                onClick={onRemove}
+                className="h-12 w-12 rounded-xl border border-border grid place-items-center bg-white"
+                aria-label="remove from cart"
+            >
+                <Trash size={22} color="#AD3434" />
+            </button>
+        </div>
+    );
+}
+
+
@@ -0,0 +1,77 @@
+"use client";
+
+import { NumberFormat } from "@/config/func";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { FC } from "react";
+
+type CartSummaryProps = {
+    itemsCount: number;
+    itemsPrice: number;
+    discount: number;
+    total: number;
+    onConfirm?: () => void;
+    confirmHref?: string;
+    confirmLabel?: string;
+    onDownloadInvoice?: () => void;
+    className?: string;
+};
+
+const Row: FC<{ label: string; value: string | number; emphasize?: boolean }> = (
+    { label, value, emphasize }
+) => {
+    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"}>
+                {typeof value === "number" ? NumberFormat(value) : value}
+            </div>
+        </div>
+    );
+};
+
+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="flex items-center justify-between">
+                <div className="text-sm text-muted-foreground">تعداد کالاها</div>
+                <div>{NumberFormat(itemsCount)} محصول</div>
+            </div>
+
+            <div className="mt-6 space-y-5">
+                <Row label="قیمت کالاها" value={itemsPrice} />
+                <Row label="تخفیف" value={discount} />
+                <Row label="جمع فاکتور" value={total} emphasize />
+            </div>
+
+            <div className="mt-8 space-y-3">
+                <Button
+                    type="button"
+                    onClick={() => onDownloadInvoice?.()}
+                    className="w-full h-12 rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90"
+                >
+                    دانلود پیش‌فاکتور
+                </Button>
+                <Button
+                    type="button"
+                    onClick={() => !confirmHref && onConfirm?.()}
+                    className="w-full h-12 rounded-xl  text-white"
+                >
+                    {confirmHref ? (
+                        <Link href={confirmHref} className="w-full h-full flex items-center justify-center">
+                            {confirmLabel ?? "تایید و تکمیل سفارش"}
+                        </Link>
+                    ) : (
+                        confirmLabel ?? "تایید و تکمیل سفارش"
+                    )}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default CartSummary;
+
+
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }