update src/components/FormFields/FormInput/index.js and src/components/ThemeColor/index.js

src/components/ThemeColor/index.js

@@ -5,7 +5,11 @@ import defaultTheme from "./default";
 import Picker from "./util/Picker";
 import ColorCard from "./ColorCard";
 
-const ThemeColor = () => {
+import { useForm } from "react-hook-form";
+
+import Input from "../AnimatedInput/Input";
+
+const ThemeColor = ({ inputFields }) => {
   const [item, setItem] = useState(null);
   const [theme, setTheme] = useState(defaultTheme);
   putTheme(theme);
@@ -25,11 +29,34 @@ const ThemeColor = () => {
       <div className="w-full flex flex-row-reverse items-start justify-between mt-7 divide-x-2 divide-[#b8dff3] divide-x-reverse">
         {/* right */}
         <div className="flex-grow flex flex-col p-4">
-          {" "}
           <div className="w-full flex flex-row items-center justify-between">
             <p className="text-2xl">Screens</p>
+            <p className=" px-2 py-0.5 bg-surface text-primaryText text-xs rtl border border-dashed">
+              بعد از نوشتن عدد مورد نظر حتما از
+              <span className="mx-1 font-bold">px</span>
+              استفاده کنید.
+            </p>
           </div>
           <hr className="my-2 border border-[#b8dff3]" />
+          <p className="w-fit self-center px-2 py-0.5 bg-surface text-primaryText text-xs rtl border border-dashed">
+            برای مثال:
+            <span className="mx-1 font-bold">444px</span>
+          </p>
+          {inputFields.map((field) => (
+            <div className="flex flex-row items-center gap-x-4 mt-4">
+              <label
+                class="block text-gray-700 text-sm font-bold mb-2 w-10"
+                for="username"
+              >
+                {field.label}:
+              </label>
+              <Input
+                type="text"
+                borderClassname={`border border-[#E0E0E0] `}
+                inputClassname={`ltr px-3 py-2 text-[#0F0543] focus:bg-white`}
+              />
+            </div>
+          ))}
         </div>
         {/* left */}
         <div className="flex-grow flex flex-col flex-1 p-4">
@@ -113,3 +140,23 @@ const ThemeColor = () => {
 };
 
 export default ThemeColor;
+
+ThemeColor.defaultProps = {
+  inputFields: [
+    {
+      label: "sm",
+    },
+    {
+      label: "md",
+    },
+    {
+      label: "lg",
+    },
+    {
+      label: "xl",
+    },
+    {
+      label: "2xl",
+    },
+  ],
+};