victorAnumudu
112 lines
3.7 KiB
TypeScript
112 lines
3.7 KiB
TypeScript
import { useState } from "react";
|
|
import { Button, FloatLabelInput } from "..";
|
|
// 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 overflow-y-auto bg-top bg-cover`}>
|
|
<div className="w-full flex justify-center">
|
|
<div className="w-4/5 md:max-w-[570px]">
|
|
<div className="bg-white w-full rounded-2xl border-2 border-black">
|
|
<div className="w-full p-5 sm:p-10 lg:p-20 flex flex-col justify-between items-center">
|
|
<div className="mb-4">
|
|
<h1 className="text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black">
|
|
Enter OTP
|
|
</h1>
|
|
<p className="text-xl mt-4 text-center font-medium text-black dark:text-black">
|
|
Please enter verification code sent to you
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-full sm:w-4/5">
|
|
{/* INPUTS */}
|
|
<div className="w-full flex justify-between gap-8">
|
|
<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 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 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">
|
|
<Button
|
|
text="Enter"
|
|
className="rounded-md w-full text-xl capitalize font-bold"
|
|
/>
|
|
{/* <Link to='#' className='text-black text-sm'>Forget your password?</Link> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|