Naufal AzmiandGitHub
228f92e9ed
* feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading * feat: register and otp integration * Update middleware.ts * feat: OTP Resend * fix: minor * stash * feat: mentor register pages * feat: mentor status page pending and success
243 lines
9.3 KiB
TypeScript
243 lines
9.3 KiB
TypeScript
import { FC, ReactElement, useState } from 'react';
|
||
import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms';
|
||
import { Button, Select } from '@imphnen-frontend-service/ui/atoms';
|
||
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
|
||
import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules';
|
||
|
||
export const Components: FC = (): ReactElement => {
|
||
const [ step, setStep ] = useState(1)
|
||
|
||
return (
|
||
<div className="flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]">
|
||
<div className="bg-white xl:min-w-[1130px] min-h-[712px] p-10 rounded-2xl shadow-md flex gap-6">
|
||
<RegisterResetBanner />
|
||
<div className="xl:border-2 xl:border-primary-500/50 xl:w-[726px] rounded-lg py-[32px] px-[48px] flex justify-center">
|
||
<div className="xl:w-[714px]">
|
||
<Button
|
||
className='xl:hidden gap-3'
|
||
variant='secondary'
|
||
>
|
||
<ArrowLeftOutlined />
|
||
Login
|
||
</Button>
|
||
<RegisterMentorStep step={step} />
|
||
<h3 className="mt-5 text-3xl font-semibold text-primary-500">
|
||
Register
|
||
</h3>
|
||
<h5 className="text-primary-500 font-medium">
|
||
Welcome to the team, Mentor - powered by IMPHNEN
|
||
</h5>
|
||
<form>
|
||
<div className={`${step !== 1 ? 'hidden' : ''}`}>
|
||
<div className='mt-7 mb-2'>
|
||
<InputField
|
||
label="Nama Lengkap"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Nama Lengkap"
|
||
name={'fullname'}
|
||
/>
|
||
</div>
|
||
<SelectField
|
||
label="Jenis Kelamin"
|
||
defaultValue=""
|
||
size="lg"
|
||
error=""
|
||
>
|
||
<option value="" disabled hidden>
|
||
Pilih Jenis Kelamin
|
||
</option>
|
||
<option value="laki-laki">Laki - Laki</option>
|
||
<option value="perempuan">Perempuan</option>
|
||
</SelectField>
|
||
<div className='my-2'>
|
||
<InputField
|
||
label="No Telp/Whatsapp Only"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Nama Lengkap"
|
||
name={'fullname'}
|
||
/>
|
||
</div>
|
||
<SelectField
|
||
label="Domisili"
|
||
defaultValue=""
|
||
size="lg"
|
||
error=""
|
||
>
|
||
<option value="" disabled hidden>
|
||
Pilih Domisili
|
||
</option>
|
||
<option value="aceh">Aceh</option>
|
||
<option value="jawa-selatan">Jawa Selatan</option>
|
||
</SelectField>
|
||
<div className='mt-2'>
|
||
<SelectField
|
||
label="Pendidikan Terakhir"
|
||
defaultValue=""
|
||
size="lg"
|
||
error=""
|
||
>
|
||
<option value="" disabled hidden>
|
||
Apa pendidikan terakhir senpai
|
||
</option>
|
||
<option value="SMA">SMA</option>
|
||
<option value="S1">S1</option>
|
||
<option value="S2">S2</option>
|
||
<option value="S3">S3</option>
|
||
</SelectField>
|
||
</div>
|
||
</div>
|
||
<div className={`${step !== 2 ? 'hidden' : ''}`}>
|
||
<div className='mt-7 mb-2 gap-2 flex flex-col'>
|
||
<InputField
|
||
label="Perusahaan Saat Ini"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Masukkan Perusahaan tempat kerja, Senpai~! ✨ (Pastikan tidak typo, ya~ 😆)"
|
||
name={'fullname'}
|
||
/>
|
||
<InputField
|
||
label="Masukan jabatan senpai di perusahaan"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Masukan jabatan senpai di perusahaan"
|
||
name={'fullname'}
|
||
/>
|
||
<SelectField
|
||
label="Topik Keahlian Yang Ingin Diajarkan"
|
||
defaultValue=""
|
||
size="lg"
|
||
error=""
|
||
>
|
||
<option value="" disabled hidden>
|
||
Apa yang ingin anda ajarkan senpaii
|
||
</option>
|
||
<option value="Frontend Developer">Frontend Developer</option>
|
||
<option value="Backend Developer">Backend Developer</option>
|
||
<option value="Other">Other</option>
|
||
</SelectField>
|
||
<InputField
|
||
label="Jika Mengisi “Other”, Tulis Topik yang Kamu Kuasai"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Tolong isi jika tidak ada di pilihan senpai"
|
||
name={'fullname'}
|
||
/>
|
||
<InputField
|
||
label="Skill Utama yang Kamu Miliki (boleh lebih dari satu)"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Isi Skill nya dong senpai"
|
||
name={'fullname'}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className={`${step !== 3 ? 'hidden' : ''}`}>
|
||
<div className='mt-7 mb-2 gap-2 flex flex-col'>
|
||
<SelectField
|
||
label="Durasi Sesi Mentoring"
|
||
defaultValue=""
|
||
size="lg"
|
||
error=""
|
||
>
|
||
<option value="" disabled hidden>
|
||
Placeholder
|
||
</option>
|
||
</SelectField>
|
||
<SelectField
|
||
label="Format Pengajaran yang Anda Sediakan"
|
||
defaultValue=""
|
||
size="lg"
|
||
error=""
|
||
>
|
||
<option value="" disabled hidden>
|
||
Placeholder
|
||
</option>
|
||
</SelectField>
|
||
<InputField
|
||
type="file"
|
||
label="Unggah Curiculum Vitae"
|
||
size="lg"
|
||
className="w-full"
|
||
/>
|
||
<InputField
|
||
label="Unggah Portofolio"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Google Drive, Behance, GitHub, Notion, dan lainnya"
|
||
/>
|
||
<InputField
|
||
type='number'
|
||
label="Honorarium yang Diharapkan per Sesi (Online) Durasi rata-rata sesi: 2,5–3 jam"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Isi Nominalnya dong senpaiii!!!"
|
||
/>
|
||
<h6 className='text-xs'>Silahkan isi dalam angka (Contoh:500.000)</h6>
|
||
</div>
|
||
</div>
|
||
<div className={`${step !== 4 ? 'hidden' : ''}`}>
|
||
<div className='mt-7 mb-2 gap-2 flex flex-col'>
|
||
<InputField
|
||
type='email'
|
||
label="Email"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="isi emailnya dong senpai!!!"
|
||
/>
|
||
<InputField
|
||
type='password'
|
||
label="Buat Password"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Buat Password"
|
||
/>
|
||
<InputField
|
||
type='password'
|
||
label="Buat Password"
|
||
size="lg"
|
||
className="w-full"
|
||
placeholder="Buat Password"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className='flex justify-end mt-4 gap-2'>
|
||
<Button
|
||
variant='secondary'
|
||
onClick={() => setStep(step - 1)}
|
||
type='button'
|
||
className={`${step === 1 ? 'hidden' : ''}`}
|
||
>
|
||
<ArrowLeftOutlined />
|
||
Kembali
|
||
</Button>
|
||
<Button
|
||
variant='primary'
|
||
onClick={() => setStep(step + 1)}
|
||
type='button'
|
||
className={`${step === 4 ? 'hidden' : ''}`}
|
||
>
|
||
Lanjutkan
|
||
<ArrowRightOutlined />
|
||
</Button>
|
||
<Button
|
||
variant='primary'
|
||
onClick={() => setStep(step + 1)}
|
||
type='button'
|
||
className={`${step === 4 ? '' : 'hidden'}`}
|
||
>
|
||
Selesaikan
|
||
<ArrowRightOutlined />
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Components;
|