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

made login page responsive

Browse Source
This commit is contained in:
victorAnumudu
2024-03-14 11:44:16 +01:00
parent 90dc2adb92
commit ea74a092e5
3 changed files with 88 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Login/Login.tsx
+44 -37
View File
@@ -1,66 +1,73 @@
import { Button, Footer } from '../../components'
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}):void => {
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 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='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-2 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
<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 */}
{/* 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}
<FloatLabelInput
id='email'
name='email'
type='email'
placeHolder='Email'
labelName='Email'
value={formDetails.email}
inputClass=''
onChange={handleFormChange}
/>
<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}
<FloatLabelInput
id='password'
name='password'
type='password'
placeholder={'password'}
// value={value}
// onChange={onChange}
placeHolder='Password'
labelName='Password'
value={formDetails.password}
inputClass=''
onChange={handleFormChange}
/>
<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'
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>
<Link to='#' className='text-black text-sm'>Forget your password?</Link>
</div>
</div>
</div>
@@ -69,7 +76,7 @@ export default function Login() {
</div>
{/* FOOTER SECTION */}
<div className='page-footer'>
<div className='page-footer w-full fixed bottom-0'>
<Footer />
</div>
</div>
src/components/shared/FloatLabelInput.tsx
+42
View File
@@ -0,0 +1,42 @@
type Props = {
id?:string,
name?:string,
type?:string,
placeHolder?:string,
labelName?:string,
inputClass?:string,
value:string,
onChange:()=>void
}
export default function FloatLabelInput({
id,
name,
type,
placeHolder,
labelName,
value,
inputClass,
onChange
}:Props) {
return (
<div className='w-full'>
<input
id={id ? id : ''}
name={name? name : ''}
className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-[#5A2C82] placeholder:text-transparent transition-all duration-500 ${inputClass && inputClass}`}
type={type ? type : 'text'}
placeholder={placeHolder ? placeHolder : ''}
value={value}
onChange={onChange}
/>
<label
htmlFor={id ? id : ''}
className={`cursor-pointer 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`}
>
{labelName ? labelName : ''}
</label>
</div>
)
}
src/components/shared/index.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import Button from "./Button";
import FloatLabelInput from "./FloatLabelInput";
export {Button}
export {Button, FloatLabelInput}