update Input.js and src/components/FormInput/index.js

src/components/AnimatedInput/Input.js

@@ -9,7 +9,6 @@ const FormFields = ({
   set,
   label,
   borderClassname,
-  inputClassname,
   type,
   maxLength,
   max,

src/components/CustomSwitch/index.js

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+const CustomSwitch = ({
+  defaultValue,
+  set,
+  values,
+  label,
+  className,
+  register,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  return (
+    <>
+      {label && <div className={"mx-1 text-xs"}>{label}</div>}
+      <div
+        onClick={() => {
+          setValue(!value);
+          register.onChange({ target: { name: register.name, value: !value } });
+        }}
+        className={`${className} flex border border-blue-500  relative  ${
+          values
+            ? "rounded h-full  min-h-[50px]"
+            : " rounded-full h-9 aspect-[1/2]"
+        }`}
+      >
+        <input
+          type="checkbox"
+          {...register}
+          checked={value ? "checked" : ""}
+          className="hidden"
+        />
+        <div
+          style={{ transform: `translateX(${value ? 0 : -100}%)` }}
+          className={`${
+            value || values ? "bg-blue-500" : "bg-gray-300"
+          } absolute right-[2%] top-[5%] z-0  transition-all duration-300   ${
+            values
+              ? "h-[90%] rounded w-[48%]"
+              : "h-[89%] rounded-full aspect-square"
+          }`}
+        ></div>
+
+        {values ? (
+          <div className=" w-[98%] h-[90%] flex flex-row-reverse right-[1%] top-[5%] z-10 absolute text-color19">
+            <div
+              className={
+                " w-1/2 h-full flex items-center justify-center cursor-pointer " +
+                (value ? "text-white" : "")
+              }
+            >
+              {values[1]}
+            </div>
+            <div
+              className={
+                " w-1/2 h-full flex items-center justify-center cursor-pointer " +
+                (!value ? "text-white" : "")
+              }
+            >
+              {values[0]}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+};
+
+export default CustomSwitch;

src/components/FormInput/index.js

@@ -4,6 +4,7 @@ import { useForm } from "react-hook-form";
 import DateRangePicker from "../DateRangePicker";
 import Input from "../AnimatedInput/Input";
 import CustomSelectBox from "../CustomSelectBox";
+import CustomSwitch from "../CustomSwitch";
 
 const FormInput = ({ items }) => {
   const { register, getValues } = useForm();
@@ -40,12 +41,11 @@ const FormInput = ({ items }) => {
           className={``}
         />
         <CustomSelectBox />
-        <Input
+        <CustomSwitch
           register={register("gender")}
-          label="جنسیت"
-          type="number"
-          borderClassname={`border-transparent `}
-          className={``}
+          className="flex-1 mx-5"
+          // defaultValue={activeUser?.gender}
+          values={["خانم", "آقا"]}
         />
       </div>
       <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
@@ -80,13 +80,13 @@ const FormInput = ({ items }) => {
         />
       </div>
       <div className="flex-grow flex-1 flex flex-col px-4 justify-between">
-        {/* <Input
+        <Input
           register={register("lastName")}
           label="تاریخ ورود"
           type="text"
           borderClassname={`border-transparent `}
           className={``}
-        /> */}
+        />
         <DateRangePicker />
       </div>
     </div>