Register Step Two Made

main
Pedram Keshavarzi 3 years ago
parent bf44fad1a7
commit a6119549f6
  1. 5
      src/components/Button/index.js
  2. 5
      src/components/input/index.js
  3. 125
      src/view/register/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}

@ -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 : 'نام کاربری'}

@ -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>

Loading…
Cancel
Save