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,41 @@
+"use client";
+
+import Button from "@/app/components/Button";
+import Select from "@/app/components/Select";
+import { formatPrice, PRODUCT_PROFIT_PERCENT, STICKY_QUANTITY_OPTIONS, type QuantityTier } from "../constants";
+
+type ProductOrderActionsProps = {
+  selectedTier: QuantityTier;
+};
+
+const ProductOrderActions = ({ selectedTier }: ProductOrderActionsProps) => {
+  return (
+    <div className="mt-5 flex w-full flex-col gap-3 self-end rounded-t-2xl bg-white px-4 py-4 shadow-[0px_-4px_34px_0px_#1A456C14] sm:flex-row sm:items-center sm:justify-between sm:gap-5 sm:px-5 sm:py-4">
+      <div className="space-y-1 text-right">
+        <p className="text-base font-bold text-[#0A1B2C] sm:text-lg">{formatPrice(selectedTier.totalPrice)}﷼</p>
+        <div className="flex items-center justify-end gap-2">
+          <span className="text-xs text-[#0A1B2C] sm:text-sm">{formatPrice(selectedTier.unitPrice)} ﷼ به ازای هر عدد</span>
+          <span className="rounded-lg bg-[#00893E] px-2 py-0.5 text-[10px] font-medium text-white sm:text-xs">{PRODUCT_PROFIT_PERCENT}٪ سود</span>
+        </div>
+      </div>
+
+      <div className="hidden h-16 w-0 shrink-0 border-s-2 border-primary sm:block" />
+
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:gap-5">
+        <div className="w-full space-y-1 sm:w-32">
+          <span className="block text-right text-xs font-medium text-[#0A1B2C]">تعداد</span>
+          <Select options={[...STICKY_QUANTITY_OPTIONS]} defaultValue="1000" className="h-10 rounded-xl border-[#E9EEF2] text-sm" />
+        </div>
+
+        <div className="flex w-full flex-col gap-1.5 sm:w-44">
+          <Button className="h-10 w-full text-sm font-bold">انتخاب روش طراحی</Button>
+          <Button variant="outline" className="h-10 w-full text-sm font-bold">
+            استعلام قیمت
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductOrderActions;