Add forgot password page

src/features/AuthInput/AuthInput.scss

@@ -0,0 +1,53 @@
+.auth-input {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  label {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #344054;
+  }
+
+  &__field,
+  &__field-with-error {
+    padding: 10px 14px;
+    display: flex;
+    align-items: center;
+    border: 1px solid rgb(208, 213, 221);
+    border-radius: 8px;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    background: rgb(255, 255, 255);
+
+    input {
+      width: 100%;
+
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      color: rgb(16, 24, 40);
+
+      ::placeholder {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        color: #667085;
+      }
+    }
+  }
+
+  &__field-with-error {
+    border: 1px solid rgb(240, 68, 56);
+  }
+
+  p {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: rgb(240, 68, 56);
+  }
+}

src/features/AuthInput/AuthInput.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import Image from "next/image";
-import eye_off from "./icons/eye-off.svg";
-import eye_on from "./icons/eye-on.svg";
-import alert from "./icons/alert-circle.svg";
+import "./AuthInput.scss";
+import eye_off from "../icons/eye-off.svg";
+import eye_on from "../icons/eye-on.svg";
+import alert from "../icons/alert-circle.svg";
 import { useState } from "react";
 
 interface IAuthInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   isPassword?: boolean;
   label: string;
-  error?: string;
+  error: string;
 }
 
 const AuthInput: React.FC<IAuthInputProps> = ({
@@ -22,17 +23,12 @@ const AuthInput: React.FC<IAuthInputProps> = ({
 }: IAuthInputProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   return (
-    <div className="flex flex-col gap-[6px]">
-      <label className="text-[14px] leading-5 text-gray-700">{label}</label>
-      <div
-        className={`px-[10px] py-[14px] flex items-center border border-gray-300 rounded-lg shadow-sm bg-white${
-          error ? "-with-error" : "border border-red-400"
-        }`}
-      >
+    <div className="auth-input">
+      <label>{label}</label>
+      <div className={`auth-input__field${error ? "-with-error" : ""}`}>
         <input
           name={name}
           placeholder={placeholder}
-          className="w-full text-[16px] leading-6 text-gray-900"
           type={!isPassword ? type : isOpen ? type : "password"}
         />
         {isPassword && (
@@ -41,11 +37,11 @@ const AuthInput: React.FC<IAuthInputProps> = ({
           </button>
         )}
       </div>
-      {error && (
-        <p className="flex items-center justify-between text-[14px] font-normal leading-5 text-red-500">
+      {error ? (
+        <p>
           {error} <Image src={alert} alt="Alert Icon" />
         </p>
-      )}
+      ) : null}
     </div>
   );
 };