DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

added admin login page

Browse Source
This commit was merged in pull request #8.
This commit is contained in:
victorAnumudu
2024-03-13 15:43:16 +01:00
parent fb8438938a
commit 59c2d55b77
8 changed files with 126 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Login/Login.tsx
+77
View File
@@ -0,0 +1,77 @@
import { Button, Footer } from '../../components'
import { Link } from 'react-router-dom'
export default function Login() {
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 h-[450px] rounded-2xl shadow-lg'>
<div className='w-full p-10 sm: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-2 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
</div>
<div className='w-full'>
{/* INPUTS */}
{/* THIS INPUTS WILL BE MADE A COMPONENT LATER, TO AVOID REPEATINGS THINGS */}
<div className='w-full'>
<div className='relative my-2 py-2'>
<input
id={'id'}
name={'email'}
className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-purple-500 placeholder:text-transparent transition-all duration-500`}
// type={type == "password" ? inputType : type}
type='text'
placeholder={'email'}
// value={value}
// onChange={onChange}
/>
<label
htmlFor={'email'}
className={`text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
>
{'Email'}
</label>
</div>
<div className='relative my-2 py-2'>
<input
id={'id'}
name={'password'}
className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-purple-500 placeholder:text-transparent transition-all duration-500`}
// type={type == "password" ? inputType : type}
type='password'
placeholder={'password'}
// value={value}
// onChange={onChange}
/>
<label
htmlFor={'email'}
className={`text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
>
{'Password'}
</label>
</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'
/>
<Link to='#' className='text-black text-sm'>Forget your password</Link>
</div>
</div>
</div>
</div>
</div>
</div>
{/* FOOTER SECTION */}
<div className='page-footer'>
<Footer />
</div>
</div>
)
}