victorAnumudu
85 lines
3.6 KiB
TypeScript
85 lines
3.6 KiB
TypeScript
import {useState} from 'react'
|
|
import { Button, Footer, FloatLabelInput } from '../../components'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
type FormType = {
|
|
email:string,
|
|
password:string
|
|
}
|
|
|
|
type HandleChange = {
|
|
name:string,
|
|
value:string
|
|
}
|
|
|
|
export default function Login() {
|
|
let [formDetails, setFormDetails] = useState<FormType>({
|
|
email: '',
|
|
password: ''
|
|
})
|
|
|
|
const handleFormChange = ({target:{name, value}}:{target:HandleChange}):any => {
|
|
setFormDetails(prev => ({...prev, [name]:value}))
|
|
}
|
|
|
|
return (
|
|
<div className={`w-full h-screen overflow-y-auto bg-[url('../../../src/assets/images/sign-in.png')] bg-top bg-cover`}>
|
|
<div className='containerMode h-full'>
|
|
<div className='grid grid-cols-1 md:grid-cols-2 items-center h-full'>
|
|
<div className='bg-white col-start-1 md:col-start-2 w-full rounded-2xl shadow-lg'>
|
|
<div className='w-full p-10 sm:p-20 md:p-10 lg:p-20 flex flex-col justify-between items-center h-full'>
|
|
<div className='mb-4'>
|
|
<h1 className='text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black'>Welcome!</h1>
|
|
<p className='text-xl mt-4 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
|
|
</div>
|
|
|
|
<div className='w-full'>
|
|
{/* INPUTS */}
|
|
<div className='w-full'>
|
|
<div className='relative my-2 py-2'>
|
|
<FloatLabelInput
|
|
id='email'
|
|
name='email'
|
|
type='email'
|
|
placeHolder='Email'
|
|
labelName='Email'
|
|
value={formDetails.email}
|
|
inputClass=''
|
|
onChange={handleFormChange}
|
|
/>
|
|
</div>
|
|
<div className='relative my-2 py-2'>
|
|
<FloatLabelInput
|
|
id='password'
|
|
name='password'
|
|
type='password'
|
|
placeHolder='Password'
|
|
labelName='Password'
|
|
value={formDetails.password}
|
|
inputClass=''
|
|
onChange={handleFormChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mt-10 w-full sm:flex justify-between items-center gap-2'>
|
|
<Button
|
|
text='Login'
|
|
className='rounded-md w-full sm:w-2/5 text-xl capitalize font-bold'
|
|
/>
|
|
<Link to='#' className='text-black text-sm'>Forget your password?</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* FOOTER SECTION */}
|
|
<div className='page-footer w-full fixed bottom-0'>
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|