CHIEFSOFT\ameye
111 lines
5.9 KiB
React
111 lines
5.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">{process.env.REACT_APP_PANEL_NAME}</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 of use.
|
|
</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">
|
|
<hr />
|
|
<p className='font-medium'>Already have an account ?
|
|
<Link to={siteLinks.login}
|
|
className='bg-secondary; hover:text-primary font-bold' style={{paddingRight: '10px'}}>
|
|
<button className="btn btn-warning text-uppercase">
|
|
Sign In
|
|
</button>
|
|
</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>
|
|
)
|
|
}
|