ادامه کار | 100

package.json

@@ -9,6 +9,7 @@
     "node-sass": "^7.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.33.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/components/AnimatedInput/Input.js

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import fixNumbers from "./fixNumbers";
+
+const Input = ({
+  defaultValue,
+  set,
+  label,
+  borderClassname,
+  inputClassname,
+  placeholderClass,
+  activePlaceholderClass,
+  type,
+  maxLength,
+  max,
+  min,
+  register,
+  onClick,
+  icon,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  console.log(value);
+  return (
+    <div
+      onClick={onClick}
+      className={
+        "h-full w-full flex flex-row items-center rounded relative bg-[#F9F9F9] " +
+        borderClassname +
+        (value ? " bg-white border rounded " : " bg-white ")
+      }
+    >
+      <div
+        className={
+          "text-xs absolute transition-all duration-300 pointer-events-none px-3 text-[#00253A] transform -translate-x-[4px]" +
+          (value
+            ? ` ${activePlaceholderClass} +  top-[-10px]`
+            : ` ${placeholderClass} + top-[10px]`)
+        }
+      >
+        {label}
+      </div>
+      {type !== "textarea" ? (
+        <input
+          {...register}
+          maxLength={maxLength}
+          value={value}
+          type={"text"}
+          onInput={(e) => {
+            let value = e.target.value;
+            if (type === "number")
+              value = fixNumbers(value).replace(/[^\d.-]/g, "");
+            if (maxLength && value.length > maxLength)
+              value = value.slice(0, maxLength);
+            if (!isNaN(max) && +e.target.value > max) value = max;
+            if (!isNaN(min) && +e.target.value < min) value = min;
+            e.target.value = value;
+          }}
+          className={`rtl w-full h-full outline-0 text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${inputClassname}  
+              ${!value ? "bg-[#F9F9F9] " : "bg-white"} `}
+          onChange={(e) => setValue(e.target.value)}
+          inputMode={type === "number" ? "numeric" : ""}
+        />
+      ) : (
+        <textarea
+          {...register}
+          className={`rtl w-full h-full text-[#00253A] p-4 outline-0 resize-none text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${
+            !value ? "bg-[#F9F9F9] " : "bg-white"
+          }`}
+          onChange={(e) => setValue(e.target.value)}
+        >
+          {value}
+        </textarea>
+      )}
+      {icon && <img src={icon} alt="calender" className="ml-2" />}
+    </div>
+  );
+};
+
+export default Input;
+
+Input.defaultProps = {
+  inputClassname: "",
+  placeholderClass: "text-[#bdc3c7]",
+  activePlaceholderClass: "text-blue-600 bg-white",
+  icon: false,
+};

src/components/AnimatedInput/fixNumbers.js

@@ -0,0 +1,22 @@
+const persianNumbers = [
+    /۰/g,
+    /۱/g,
+    /۲/g,
+    /۳/g,
+    /۴/g,
+    /۵/g,
+    /۶/g,
+    /۷/g,
+    /۸/g,
+    /۹/g,
+  ],
+  arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g],
+  fixNumbers = function (str) {
+    if (typeof str === "string") {
+      for (var i = 0; i < 10; i++) {
+        str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
+      }
+    }
+    return str;
+  };
+export default fixNumbers;

src/components/RadioButton/index.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+const RadioButton = () => {
+  return (
+    <div className="relative flex items-center justify-between rounded py-4 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent divide-x-2 divide-[#E3E3E3] divide-x-reverse">
+      <div className="flex items-center justify-center flex-1 pl-5">
+        <input
+          id="default-radio-1"
+          type="radio"
+          value=""
+          name="default-radio"
+          class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        />
+        <label for="default-radio-1" class="mr-2 text-xs text-[#00253A]">
+          بله
+        </label>
+      </div>
+      <div className="flex items-center justify-center flex-1 pl-5">
+        <input
+          id="default-radio-2"
+          type="radio"
+          value=""
+          name="default-radio"
+          class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        />
+        <label for="default-radio-2" class="mr-2 text-xs text-[#00253A]">
+          خیر
+        </label>
+      </div>
+      <div class="absolute top-0 transform -translate-y-2.5 -translate-x-2 px-2 z-10 bg-white">
+        <p className="text-xs text-[#00253A]">آیا قابلیت ارجاع دارد؟</p>
+      </div>
+    </div>
+  );
+};
+
+export default RadioButton;

src/components/Settingss/index.js

@@ -1,9 +1,16 @@
 import React from "react";
+import { useForm } from "react-hook-form";
+
 import CustomSelectBox from "../CustomSelectBox";
+import Input from "../AnimatedInput/Input";
+import CircleInCircle from "../CircleInCircle";
+import RadioButton from "../RadioButton";
+
+const Settingss = ({ status }) => {
+  const { register, getValues } = useForm();
 
-const Settingss = () => {
   return (
-    <div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-[#E3E3E3] divide-x-reverse">
+    <div className="w-full flex flex-row items-start justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-[#E3E3E3] divide-x-reverse">
       <div className="flex-grow flex-1 flex flex-col pl-5">
         <div className="flex flex-col gap-y-7">
           <CustomSelectBox
@@ -14,18 +21,43 @@ const Settingss = () => {
               { title: "شماره 3" },
             ]}
           />
+          <Input
+            register={register("lastName")}
+            label="توضیحات"
+            type="textarea"
+            borderClassname={`border border-red-[#E3E3E3] `}
+          />
           <CustomSelectBox
             options={[
-              { title: "انتخاب تابع" },
+              { title: "اولویت دهی" },
               { title: "شماره 1" },
               { title: "شماره 2" },
               { title: "شماره 3" },
             ]}
           />
+          <CustomSelectBox
+            options={[
+              { title: "نوع فرآیند" },
+              { title: "شماره 1" },
+              { title: "شماره 2" },
+              { title: "شماره 3" },
+            ]}
+          />
+          <div className="flex items-center justify-between rounded py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent">
+            <p className="text-xs text-[#00253A] mr-5">وضیعت</p>
+            <div className="ml-1">
+              <CircleInCircle
+                parentClassName={`w-5 h-5  ${
+                  status ? "bg-green-600" : "bg-red-600"
+                }`}
+                childClassName={false}
+              />
+            </div>
+          </div>
+          <RadioButton />
         </div>
       </div>
       <div className="flex-grow flex-1 flex flex-col pr-5">
-        <p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع پایان</p>
         <div className="flex flex-col gap-y-7">
           <CustomSelectBox
             options={[
@@ -50,3 +82,7 @@ const Settingss = () => {
 };
 
 export default Settingss;
+
+Settingss.defaultProps = {
+  status: true,
+};