Initial commit

src/components/CustomBottomSheet/TipBottomSheet.tsx

@@ -0,0 +1,79 @@
+import { Button, Input } from "antd";
+import WaiterRewardingIcon from "components/Icons/waiter/WaiterRewardingIcon";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+
+interface TipBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialValue: string;
+  onSave: (value: string) => void;
+}
+
+export function TipBottomSheet({
+  isOpen,
+  onClose,
+  initialValue,
+  onSave,
+}: TipBottomSheetProps) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const handleSave = () => {
+    onSave(value);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setValue(initialValue);
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("cart.tip")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={"45vh"}
+      snapPoints={["30vh"]}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <WaiterRewardingIcon />
+
+        <br />
+
+        <Input
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={t("cart.amount")}
+          autoFocus={false}
+          size="large"
+        />
+
+        <br />
+
+        <Button
+          type="primary"
+          style={{ width: "100%", height: 50 }}
+          onClick={handleSave}
+        >
+          {t("cart.addTip")}
+        </Button>
+      </div>
+    </ProBottomSheet>
+  );
+}