Register Step One Made And Completed

src/components/Button/index.js

@@ -1 +1,24 @@
-import React from "react";
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Button = (
+    {
+        onClick,
+        title,
+        borderType,
+        to,
+        type
+    }
+) => {
+    return (
+        <Link
+            to={to ? to : ''}
+            className={`Login-box-form-btn w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-solid border-red52 ${type == 'outlined' ? 'text-red52' : 'text-white bg-red52'} flex items-center justify-center mt-4`}
+            onClick={onClick}
+        >
+            {title}
+        </Link>
+    );
+};
+
+export default Button;

src/components/input/index.js

@@ -35,7 +35,7 @@ const Input = ({
         }
     };
     return (
-        <div className={`Login-box-form-item w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7  mt-6 relative flex items-center flex-row-reverse`}>
+        <div className={`Login-box-form-item w-full mx-2 h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7  mt-6 relative flex items-center flex-row-reverse`}>
             <div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 bg-color7`}></div>
             <div className="Login-box-form-item-label text-sm text-color19 absolute right-6 transition-all duration-300 pointer-events-none">
                 {title ? title : 'نام کاربری'}

src/view/register/index.js

@@ -9,6 +9,7 @@ import thirdPic from '../../assets/img/undraw_certificate_re_yadi.svg';
 import VerificationInput from "../../components/verificationInput";
 import Input from "../../components/input";
 import FileInput from "../../components/fileInput";
+import Button from "../../components/Button";
 
 
 const Register = ({ activeLogin }) => {
@@ -59,7 +60,62 @@ const Register = ({ activeLogin }) => {
             step: 3
         },
     ]
+    const grades = [
+        {
+            id: 0,
+            title: ''
+        },
+        {
+            id: 1,
+            title: 'پایه اول'
+        },
+        {
+            id: 2,
+            title: 'پایه دوم'
+        },
+        {
+            id: 3,
+            title: 'پایه سوم'
+        },
+        {
+            id: 4,
+            title: 'پایه چهارم'
+        },
 
+        {
+            id: 5,
+            title: 'پایه پنجم'
+        },
+        {
+            id: 6,
+            title: 'پایه ششم'
+        },
+        {
+            id: 7,
+            title: 'پایه هفتم'
+        },
+        {
+            id: 8,
+            title: 'پایه هشتم'
+        },
+        {
+            id: 9,
+            title: 'پایه نهم'
+        },
+        {
+            id: 10,
+            title: 'پایه دهم'
+        },
+        {
+            id: 11,
+            title: 'پایه یازدهم'
+        },
+        {
+            id: 12,
+            title: 'پایه دوازدهم'
+        },
+        
+    ]
 
     return (
         <div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
@@ -140,13 +196,43 @@ const Register = ({ activeLogin }) => {
                                     </div>    
                                 </div>    
                                 </div>
-                            <div className="w-full px-10 py-6 border-b flex items-center border-solid border-gray-200"> 
-                            <div className="mb-4">
+                            <div className="w-full px-10 py-10 border-b flex items-center border-solid border-gray-200"> 
+                            <div className="">
                                     <h1 className="font-black">پایه تحصیلی</h1>
                                     <p className="font-bold text-gray-300 text-sm">لطفا پایه تحصیلی دانش آموز را وارد کنید</p>
                                 </div>
+                                <select className="bg-white border border-solid border-gray-300 w-48 p-3 rounded-lg text-gray-400 outline-red52 mx-6">
+                                    {grades.map((item) =>(
+                                        <option key={`Grade__${item.id}`}>{item.title}</option>
+                                    ))}
+                                </select>
                             </div>
+                            <div className="w-full px-10 py-8 flex flex-col "> 
+                            <div className="mb-4">
+                                    <h1 className="font-black">مشخصات هویتی دانش آموز</h1>
+                                    <p className="font-bold text-gray-300 text-sm">اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید</p>
+                                </div>
+                            <div className="flex justify-between items-center">
+                                        <Input title="نام مدرسه" borderType="rounded" gapSize="20" direction='rtl' id={4}/>
+                                        <select className="bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6">
+                                    {grades.map((item) =>(
+                                        <option key={`Grade__${item.id}`}>{item.title}</option>
+                                        ))}
+                                    </select>
+                                        <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={5}/>
+                                        <Input title="کدملی" borderType="rounded" gapSize="12" id={6} type='number'/>
+                                
+                            </div>  
+                            <div className="flex pt-10 justify-end">
+                                <div className="w-40">
+                                        <Button borderType='rounded' title='مرحله بعد'  onClick={() =>
+                                            setSteps(1)
+                                        } />
+                                        </div>
+                            </div>  
 
+                            </div>
+                            
                             </>
                         }
                     </div>