Initial commit

2025-10-04 18:22:24 +03:00
commit 2852c2c054
291 changed files with 38109 additions and 0 deletions
--- a/src/components/ActionsButtons/ActionsButtons.tsx
+++ b/src/components/ActionsButtons/ActionsButtons.tsx
@@ -0,0 +1,110 @@
+import { MinusOutlined } from "@ant-design/icons";
+import { Button, Grid, InputNumber, Popconfirm } from "antd";
+import DeleteIcon from "components/Icons/DeleteIcon";
+import PlusIcon from "components/Icons/PlusIcon";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import { colors } from "../../ThemeConstants";
+import styles from "./ActionsButtons.module.css";
+
+const { useBreakpoint } = Grid;
+
+export default function ActionsButtons({
+  quantity,
+  setQuantity,
+  max,
+  min,
+}: {
+  quantity: number;
+  setQuantity: (quantity: number) => void;
+  max?: number;
+  min?: number;
+}) {
+  const { t } = useTranslation();
+  const { xs } = useBreakpoint(); // Default to desktop
+  const { isRTL } = useAppSelector((state) => state.locale); // Default to LTR
+
+  const getPopconfirmOverlayStyle = () => ({
+    width: xs ? "280px" : "auto",
+    maxWidth: "320px",
+    ".antPopconfirmMessageTitle": {
+      fontSize: xs ? "14px" : "16px",
+      paddingRight: xs ? "24px" : "0",
+    },
+    ".antPopconfirmMessageContent": {
+      fontSize: xs ? "13px" : "14px",
+      marginTop: "4px",
+    },
+    ".antPopconfirmButtons": {
+      marginTop: "12px",
+      ".ant-btn": {
+        fontSize: xs ? "13px" : "14px",
+        height: xs ? "28px" : "32px",
+        padding: xs ? "0 12px" : "4px 15px",
+      },
+    },
+  });
+
+  return (
+    <div className={styles.cartItemActions}>
+      <div className={styles.quantityControls}>
+        <div className={styles.quantityInputContainer}>
+          {quantity > 0 ? (
+            <Button
+              type="text"
+              size="small"
+              onClick={() => setQuantity(Math.max(1, quantity - 1))}
+              className={styles.quantityButton}
+              {...(min && { disabled: quantity === min })}
+            >
+              <MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
+            </Button>
+          ) : (
+            <Popconfirm
+              title={t("cart.deleteConfirmation.title")}
+              description={t("cart.deleteConfirmation.content")}
+              onConfirm={() => setQuantity(0)}
+              okText={t("cart.deleteConfirmation.confirm")}
+              cancelText={t("cart.deleteConfirmation.cancel")}
+              okButtonProps={{ danger: true }}
+              placement={isRTL ? "left" : "right"}
+              styles={{
+                root: getPopconfirmOverlayStyle(),
+                body: {
+                  padding: xs ? "12px" : "16px",
+                },
+              }}
+            >
+              <Button
+                type="text"
+                size="small"
+                danger
+                icon={<DeleteIcon className={styles.deleteIcon} />}
+                className={styles.removeButton}
+              />
+            </Popconfirm>
+          )}
+          <InputNumber
+            min={min || 1}
+            max={max || 100}
+            value={quantity || 1}
+            onChange={(value) => setQuantity(value || 1)}
+            size="small"
+            controls={false}
+            className={styles.quantityInput}
+            name="id"
+          />
+          <Button
+            type="text"
+            size="small"
+            onClick={() => setQuantity(Math.min(100, quantity + 1))}
+            className={styles.quantityButton}
+            {...(max && { disabled: quantity >= max })}
+          >
+            <PlusIcon className={styles.plusIcon} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}