worling on add car bottom sheet

2026-01-06 09:03:51 +03:00
parent 20ef4f416c
commit 14c36518cc
4 changed files with 176 additions and 5 deletions
--- a/src/components/CustomBottomSheet/AddCarBottomSheet.tsx
+++ b/src/components/CustomBottomSheet/AddCarBottomSheet.tsx
@@ -0,0 +1,126 @@
+import { Button, Form, Input } from "antd";
+import ProPhoneInput from "components/ProPhoneInput";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+
+const { TextArea } = Input;
+
+interface CarDetailsType {
+  brandId: string;
+  category: string;
+  color: string;
+  plateNumber: string;
+}
+
+interface AddCarBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (value: CarDetailsType) => void;
+}
+
+export function AddCarBottomSheet({
+  isOpen,
+  onClose,
+  onSave,
+}: AddCarBottomSheetProps) {
+  const { t } = useTranslation();
+  const [carForm] = Form.useForm();
+  useEffect(() => {
+    carForm.setFieldsValue({});
+  }, [carForm]);
+
+  const handleSave = () => {
+    onSave(carForm.getFieldsValue());
+    carForm.resetFields();
+    onClose();
+  };
+
+  const handleCancel = () => {
+    carForm.resetFields();
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("car.addCarDetails")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={475}
+      snapPoints={[475]}
+    >
+      <Form
+        layout="vertical"
+        style={{ marginTop: 24}}
+        name="carForm"
+        form={carForm}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+          <Form.Item
+            name="brandId"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.brand")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="color"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.color")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="category"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.category")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="plateNumber"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.plateNumber")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+        </div>
+      </Form>
+
+      <br />
+
+      <Button
+        type="primary"
+        style={{ width: "100%", boxShadow: "none" }}
+        onClick={handleSave}
+      >
+        {t("car.save")}
+      </Button>
+    </ProBottomSheet>
+  );
+}