base product single page

2026-07-21 11:25:41 +03:30
parent 6f22885ae9
commit ec39e4448d
9 changed files with 444 additions and 0 deletions
@@ -0,0 +1,96 @@
+"use client";
+
+import Select from "@/app/components/Select";
+import { cn } from "@/app/lib/cn";
+import { InfoCircle } from "iconsax-reactjs";
+import { type FC } from "react";
+import { Rating } from "react-simple-star-rating";
+import { BOX_BAND_OPTIONS, formatPrice, PAPER_TYPE_OPTIONS, PRODUCT_PACKAGE_SIZE, PRODUCT_RATING, PRODUCT_SHORT_DESCRIPTION, PRODUCT_TITLE, QUANTITY_TIERS, type QuantityTier } from "../constants";
+
+type ProductPurchaseOptionsProps = {
+  selectedTier: QuantityTier;
+  onSelectTier: (tier: QuantityTier) => void;
+};
+
+const ProductPurchaseOptions: FC<ProductPurchaseOptionsProps> = ({ selectedTier, onSelectTier }) => {
+  return (
+    <div className="flex w-full min-w-0 flex-1 flex-col items-end gap-4">
+      <div className="w-full space-y-2 text-right">
+        <h1 className="text-xl font-bold text-[#0A1B2C] sm:text-2xl">{PRODUCT_TITLE}</h1>
+
+        <div className="flex items-center gap-2">
+          <Rating initialValue={PRODUCT_RATING} size={16} readonly rtl allowFraction SVGstyle={{ display: "inline-block" }} />
+          <span className="text-sm font-medium text-[#0A1B2C]">{PRODUCT_RATING}</span>
+        </div>
+      </div>
+
+      <p className="w-full whitespace-pre-line text-right text-xs leading-6 text-[#0A1B2C] sm:text-sm sm:leading-7">{PRODUCT_SHORT_DESCRIPTION}</p>
+
+      <div className="w-full space-y-0.5 text-right">
+        <p className="text-base font-bold text-[#0A1B2C] sm:text-lg">{formatPrice(selectedTier.totalPrice)}﷼</p>
+        <p className="text-xs text-[#4D4D4D] sm:text-sm">
+          {formatPrice(selectedTier.unitPrice)}﷼ برای هر عدد ( بسته {formatPrice(PRODUCT_PACKAGE_SIZE)} عددی)
+        </p>
+      </div>
+
+      <div className="w-full space-y-3">
+        <Field label="جنس ورق">
+          <Select options={[...PAPER_TYPE_OPTIONS]} defaultValue={PAPER_TYPE_OPTIONS[0].value} className="h-10 rounded-xl border-[#E9EEF2] text-sm" />
+        </Field>
+
+        <Field label="بند جعبه">
+          <Select options={[...BOX_BAND_OPTIONS]} defaultValue={BOX_BAND_OPTIONS[0].value} className="h-10 rounded-xl border-[#E9EEF2] text-sm" />
+        </Field>
+
+        <div className="space-y-1.5">
+          <span className="block text-right text-xs font-medium text-[#0A1B2C] sm:text-sm">تعداد</span>
+
+          <div className="space-y-1.5">
+            {QUANTITY_TIERS.map((tier) => {
+              const isSelected = selectedTier.quantity === tier.quantity;
+
+              return (
+                <button
+                  key={tier.quantity}
+                  type="button"
+                  onClick={() => onSelectTier(tier)}
+                  className={cn(
+                    "flex h-10 w-full items-center justify-between gap-2 rounded-xl border border-[#E9EEF2] px-3 transition-colors",
+                    isSelected ? "bg-secondary" : "bg-white hover:bg-secondary/50",
+                  )}
+                >
+                  <span className="w-6 shrink-0 text-end text-xs font-medium text-[#0A1B2C]">{tier.quantity}</span>
+
+                  <div className="flex min-w-0 flex-1 items-center justify-center gap-2">
+                    <span className="text-[11px] text-[#0A1B2C] sm:text-xs">{formatPrice(tier.unitPrice)}﷼ / هر عدد</span>
+                    <span className="text-xs font-medium text-[#0A1B2C]">{formatPrice(tier.totalPrice)}﷼</span>
+                  </div>
+                  <span className={cn("w-6 shrink-0 text-start text-xs font-medium", tier.discount ? "text-[#DC0000]" : "text-[#0A1B2C]")}>{tier.discount ? `-${tier.discount}%` : tier.quantity}</span>
+                </button>
+              );
+            })}
+          </div>
+
+          <button type="button" className="flex items-center gap-1 text-[11px] text-[#21588C] sm:text-xs">
+            <InfoCircle size={14} color="currentColor" variant="Linear" />
+            تعداد بیشتر
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type FieldProps = {
+  label: string;
+  children: React.ReactNode;
+};
+
+const Field: FC<FieldProps> = ({ label, children }) => (
+  <div className="space-y-1.5">
+    <span className="block text-right text-xs font-medium text-[#0A1B2C] sm:text-sm">{label}</span>
+    {children}
+  </div>
+);
+
+export default ProductPurchaseOptions;