update pay function

src/views/AgentChat/neuratalk/components/ModalSettings/General/index.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import Field from "@/components/Field";
+import Icon from "@/components/Icon";
+import Button from "@/components/Button";
+import UploadImage from "./UploadImage";
+
+const General = ({}) => {
+    const [fullName, setFullName] = useState("");
+    const [email, setEmail] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+
+    return (
+        <div className="-mt-5 max-md:mt-0">
+            <div className="flex items-center mb-3 pb-3 border-b border-stroke-soft-200 max-md:flex-col max-md:items-start max-md:gap-3">
+                <div className="mr-auto">
+                    <div className="text-label-md">Avatar</div>
+                    <div className="text-sub-600">Update full name</div>
+                </div>
+                <UploadImage />
+            </div>
+            <div className="mb-3 pb-3 border-b border-stroke-soft-200">
+                <div className="mb-3">
+                    <div className="text-label-md">Personal Information</div>
+                    <div className="text-sub-600">
+                        Edit your personal information
+                    </div>
+                </div>
+                <Field
+                    className="mb-3"
+                    label="Full name"
+                    placeholder="Enter full name"
+                    value={fullName}
+                    onChange={(e) => setFullName(e.target.value)}
+                    required
+                    isSmall
+                />
+                <Field
+                    className="mb-1"
+                    label="Email"
+                    placeholder="Enter email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    isSmall
+                />
+                <button className="inline-flex items-center gap-2 text-label-xs text-sub-600 transition-opacity hover:opacity-80">
+                    <Icon className="!size-4" name="plus" />
+                    Add another
+                </button>
+            </div>
+            <div className="mb-3">
+                <div className="mb-3">
+                    <div className="text-label-md">Phone number</div>
+                    <div className="text-sub-600">Update your phone number</div>
+                </div>
+                <Field
+                    className=""
+                    label="Phone number"
+                    placeholder="Enter phone number"
+                    type="tel"
+                    value={phoneNumber}
+                    onChange={(e) => setPhoneNumber(e.target.value)}
+                    required
+                    isSmall
+                />
+            </div>
+            <div className="flex justify-end gap-3">
+                <Button className="!h-10 !px-4.5 !bg-weak-50" isStroke>
+                    Discard
+                </Button>
+                <Button className="!h-10 !px-4.5" isBlack>
+                    Save Changes
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default General;