victorAnumudu
98 lines
4.9 KiB
React
98 lines
4.9 KiB
React
import React, { useEffect, useState } from 'react'
|
|
import LoginImg from '../../assets/bg/login.svg'
|
|
import MainLoader from '../loaders/MainLoader'
|
|
import { Link, useNavigate } from 'react-router-dom'
|
|
import siteLinks from '../../links/siteLinks'
|
|
import Label from '../Label'
|
|
import TextInput from '../inputs/TextInput'
|
|
|
|
|
|
export default function Signup() {
|
|
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const navigate = useNavigate()
|
|
|
|
useEffect(()=>{
|
|
const timer = setTimeout(()=>{
|
|
setLoading(false)
|
|
},1000)
|
|
|
|
return () => clearTimeout(timer)
|
|
},[])
|
|
|
|
return (
|
|
<div className="h-screen bg-white w-full flex justify-center items-center">
|
|
<div className="h-full w-full bg-white grid sm:grid-cols-2 lg:grid-cols-5 xl:grid-cols-8">
|
|
<div className="col-span-1 lg:col-span-2 xl:col-span-2 place-content-center order-2 sm:order-1">
|
|
<div className="w-full p-4 px-8 md:p-10 flex flex-col gap-6 items-start justify-start">
|
|
<div className='w-full text-left'>
|
|
<h1 className="mb-2 text-black text-4xl font-semibold">MERMS Panel</h1>
|
|
<p className='text-black-gray text-base'>Welcome, Please create your account.</p>
|
|
</div>
|
|
<form className="w-full text-14 text-left text-black-gray">
|
|
<div className="w-full flex flex-col gap-4 justify-start items-start">
|
|
<div className='w-full grid grid-cols-2 gap-8'>
|
|
<div className="w-full">
|
|
<div className="w-full flex flex-col gap-2">
|
|
<Label desc='First Name*' />
|
|
<TextInput type='text' placeholder='Firstname' />
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="w-full flex flex-col gap-2">
|
|
<Label desc='Last Name*' />
|
|
<TextInput type='text' placeholder='Lastname' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="w-full flex flex-col gap-2">
|
|
<Label desc='Email*' />
|
|
<TextInput type='text' placeholder='Email' />
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="w-full flex flex-col gap-2">
|
|
<Label desc='User Name*' />
|
|
<TextInput type='text' placeholder='Username' />
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="w-full flex flex-col gap-2">
|
|
<Label desc='Password*' />
|
|
<TextInput type='password' placeholder='Password' />
|
|
</div>
|
|
</div>
|
|
<div className="w-full text-left">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex gap-2">
|
|
<input className="form-check-input" type="checkbox" id="gridCheck" />
|
|
<label className="font-semibold form-check-label" htmlFor="gridCheck">
|
|
I accept terms & policy
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full mt-3">
|
|
<button onClick={()=>{navigate(siteLinks.home)}} className="bg-primary rounded-sm px-4 py-2 text-white font-medium uppercase">Sign Up</button>
|
|
</div>
|
|
<div className="mt-3">
|
|
<p className='font-medium'>Already have an account ?<Link to={siteLinks.login} className=' hover:text-primary'> Sign In</Link></p>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div className="bg-login_gradient h-full col-span-1 lg:col-span-3 xl:col-span-6 place-content-center order-1 sm:order-2">
|
|
<div className="w-full">
|
|
<div className="w-2/3 mx-auto">
|
|
<img className="w-[80%]" src={LoginImg} alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|