hamid zarghami
85 lines
3.4 KiB
TypeScript
85 lines
3.4 KiB
TypeScript
import { FC } from 'react'
|
|
import LogoImage from '../../assets/images/logo.svg'
|
|
import LogoSmallImage from '../../assets/images/logo-small.svg'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Input from '../../components/Input'
|
|
import DatePickerComponent from '../../components/DatePicker'
|
|
import Button from '../../components/Button'
|
|
|
|
const Login: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
|
|
return (
|
|
<div className='w-full h-full flex justify-center py-[100px] items-center px-10'>
|
|
<div className='flex w-full max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
|
|
<div className='flex-1 min-w-[50%] overflow-y-auto bg-white p-9'>
|
|
<div className=''>
|
|
<img src={LogoSmallImage} className='w-8' />
|
|
<div className='mt-5'>
|
|
<h2 className='text-3xl font-bold'>
|
|
{t('auth.welcome')}
|
|
</h2>
|
|
<p className='text-description mt-2'>
|
|
{t('auth.enter_information')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className='mt-8'>
|
|
{t('auth.user_info')}
|
|
</div>
|
|
|
|
<div className='mt-6 rowTwoInput'>
|
|
<Input
|
|
label={t('auth.name')}
|
|
placeholder={t('auth.enter_name')}
|
|
/>
|
|
<Input
|
|
label={t('auth.family')}
|
|
placeholder={t('auth.enter_family')}
|
|
/>
|
|
</div>
|
|
<div className='mt-6 min-w-full rowTwoInput'>
|
|
<DatePickerComponent label={t('auth.dateofbirth')} onChange={(date: string) => console.log(date)} placeholder={t('auth.select_date')} />
|
|
<Input
|
|
label={t('auth.family')}
|
|
placeholder={t('auth.enter_family')}
|
|
/>
|
|
</div>
|
|
|
|
<div className='mt-6 rowTwoInput'>
|
|
<Input
|
|
label={t('auth.email')}
|
|
placeholder={t('auth.enter_email')}
|
|
/>
|
|
<Input
|
|
label={t('auth.phonen_number')}
|
|
placeholder={t('auth.enter_phone_number')}
|
|
/>
|
|
</div>
|
|
|
|
<div className='mt-6 rowTwoInput'>
|
|
<Input
|
|
label={t('auth.password')}
|
|
placeholder={t('auth.enter_password')}
|
|
type='password'
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
label={t('auth.next')}
|
|
className='mt-6'
|
|
/>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div className='flex-1 min-w-[50%] flex justify-center items-center'>
|
|
<img src={LogoImage} className='h-20' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Login |