Created a profile editing page

src/pages/login.tsx

@@ -7,14 +7,15 @@ import Head from "next/head";
 import useUser from "@/hooks/useUser";
 import {Divider} from "primereact/divider";
 import Button from "@/components/Low/Button";
-import {BsArrowRepeat} from "react-icons/bs";
+import {BsArrowRepeat, BsCheck} from "react-icons/bs";
 import Link from "next/link";
 import Input from "@/components/Low/Input";
+import clsx from "clsx";
 
 export default function Login() {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
-	const [showPassword, setShowPassword] = useState(false);
+	const [rememberPassword, setRememberPassword] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const {mutateUser} = useUser({
@@ -65,6 +66,23 @@ export default function Login() {
 					<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={login}>
 						<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
 						<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
+						<div className="flex justify-between w-full px-4">
+							<div className="flex gap-3 text-mti-gray-dim text-xs cursor-pointer" onClick={() => setRememberPassword((prev) => !prev)}>
+								<input type="checkbox" className="hidden" />
+								<div
+									className={clsx(
+										"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-green-light bg-white",
+										"transition duration-300 ease-in-out",
+										rememberPassword && "!bg-mti-green-light ",
+									)}>
+									<BsCheck color="white" className="w-full h-full" />
+								</div>
+								<span>Remember my password</span>
+							</div>
+							<Link href="/forgot-password" className="text-mti-green-light text-xs">
+								Forgot Password?
+							</Link>
+						</div>
 						<Button className="mt-8 w-full" color="green" disabled={isLoading}>
 							{!isLoading && "Login"}
 							{isLoading && (