From a6119549f61b82c1f6a45cd17eed4c2e8189af39 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Sun, 6 Feb 2022 16:58:59 +0330
Subject: [PATCH] Register Step Two Made

---
 src/components/Button/index.js |   5 +-
 src/components/input/index.js  |   5 +-
 src/view/register/index.js     | 125 ++++++++++++++++++++++++++++++++-
 3 files changed, 129 insertions(+), 6 deletions(-)

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index a53a378..ad36abd 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -7,13 +7,14 @@ const Button = (
         title,
         borderType,
         to,
-        type
+        type,
+        className
     }
 ) => {
     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`}
+            className={`${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}
diff --git a/src/components/input/index.js b/src/components/input/index.js
index 3c10eba..c1747f0 100644
--- a/src/components/input/index.js
+++ b/src/components/input/index.js
@@ -7,7 +7,8 @@ const Input = ({
     gapSize,
     id,
     type,
-    direction
+    direction,
+    className
 
 }) => {
 
@@ -35,7 +36,7 @@ const Input = ({
         }
     };
     return (
-        <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={`${className} Login-box-form-item w-full ml-4 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 : 'نام کاربری'}
diff --git a/src/view/register/index.js b/src/view/register/index.js
index da25082..f29a8ae 100644
--- a/src/view/register/index.js
+++ b/src/view/register/index.js
@@ -192,8 +192,7 @@ const Register = ({ activeLogin }) => {
                                         </div>
                                         </div>
                                     
-                                    <div>
-                                    </div>    
+                                        
                                 </div>    
                                 </div>
                             <div className="w-full px-10 py-10 border-b flex items-center border-solid border-gray-200"> 
@@ -235,6 +234,128 @@ const Register = ({ activeLogin }) => {
                             
                             </>
                         }
+                        {
+                            steps == 1 &&
+                            <>
+                            <div className="w-full px-10 pb-6 border-b border-solid border-gray-200"> 
+                                <div className="mb-4">
+                                    <h1 className="font-black">مشخصات هویتی پدر</h1>
+                                    <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p>
+                                </div>
+                                <div className="flex">
+                                
+                                        
+                                        <Input title="نام" borderType="rounded" gapSize="8" direction='rtl'/>
+                                        <Input title="کدملی" borderType="rounded" gapSize="12" id={1} type='number'/>
+                                        
+                                        
+                                        <Input title="نام خانوادگی" borderType="rounded" id={2} direction='rtl'/>
+                                        <Input title="مدرک نحصیلی" borderType="rounded" gapSize="20" id={3} />
+                                        
+                                    
+                                    
+                                     
+                                </div>   
+                                <div className="flex">
+                                
+                                        
+                                        <Input title="تلفن همراه" borderType="rounded" type='number' id={4}/>
+                                        <Input title="شغل" borderType="rounded" direction='rtl' gapSize="8" id={5} />
+                                        
+                                        
+                                        <Input title="محل کار" borderType="rounded" id={6} direction='rtl'/>
+                                        <Input title="تلفن محل کار" borderType="rounded" gapSize="28" id={7} type='number'/>
+                                        
+                                    
+                                    
+                                     
+                                </div>   
+                                </div>
+
+
+                                  
+                            <div className="w-full px-10 py-6 border-b border-solid border-gray-200"> 
+                                <div className="mb-4">
+                                    <h1 className="font-black">مشخصات هویتی پدر</h1>
+                                    <p className="font-bold text-gray-300 text-sm">لطفا اطلاعات مربوط هویتی پدر را وارد کنید</p>
+                                </div>
+                                <div className="flex">
+                                
+                                        
+                                        <Input title="نام" borderType="rounded" gapSize="8" direction='rtl' id={8}/>
+                                        <Input title="کدملی" borderType="rounded" gapSize="12" id={9} type='number'/>
+                                        
+                                        
+                                        <Input title="نام خانوادگی" borderType="rounded" id={10} direction='rtl'/>
+                                        <Input title="مدرک نحصیلی" borderType="rounded" gapSize="20" id={11} />
+                                        
+                                    
+                                    
+                                     
+                                </div>   
+                                <div className="flex">
+                                
+                                        
+                                        <Input title="تلفن همراه" borderType="rounded" type='number' id={12}/>
+                                        <Input title="شغل" borderType="rounded" direction='rtl' gapSize="8" id={13} />
+                                        
+                                        
+                                        <Input title="محل کار" borderType="rounded" id={14} direction='rtl'/>
+                                        <Input title="تلفن محل کار" borderType="rounded" gapSize="28" id={15} type='number'/>
+                                        
+                                    
+                                    
+                                     
+                                </div>   
+                                </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">
+                                        <div className="w-4/5 flex">
+                                        <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" type='number' gapSize="40" direction='rtl' id={16}/>
+                                        </div>
+                                        <Input title="نشانی محل سکونت" borderType="rounded" gapSize="40" id={17} />
+                                        
+                            </div>  
+                            <div className="flex justify-start items-center">
+                                        <div className="w-2/5 flex">
+                                        
+                                        <Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={16} className="w-1/2"/>
+                                        <Input title="تعداد افراد خانواده" borderType="rounded" type='number' gapSize="40" direction='rtl' id={16} className="w-1/2"/>
+                                        </div>
+                                        
+                                        
+                            </div>  
+                            <div className="flex pt-10 justify-end">
+                            <div className="w-40 mx-4">
+                                        <Button borderType='rounded' title='بازگشت به مرحله قبل' type='outlined'  onClick={() =>
+                                            setSteps(0)
+                                        } />
+                                </div>
+                             
+                                <div className="w-40">
+                                        <Button borderType='rounded' title='مرحله بعد'  onClick={() =>
+                                            setSteps(2)
+                                        } />
+                                </div>
+                                </div> 
+
+                            </div>
+                            
+                            </>
+                        }
+
+
                     </div>
 
                 </div>