created email input

compass/app/auth/forgot_password/page.tsx

@@ -1,5 +1,5 @@
 "use client"
-import Button from '@/components/Button49';
+import Button from '@/components/Button';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';
@@ -44,7 +44,7 @@ export default function Page()  {
                         iconKey={'EmailInputIcon'}
                         onChange={(e) => {
                             setconfirmEmail(e.target.value);
-                            setEmailError(''); // Reset the error when the user types
+                            
                         }}/>
                         {emailError && (
                         <p className={`mt-2 ${emailError.includes('exists in the database') ? 'text-green-500' : 'text-red-500'}`}>

compass/components/auth/EmailInput.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import Input from '@/components/Input'
+import { InputProps } from '@/utils/classes/InputProps';
+
+const EmailInput: React.FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
+
+  return (
+    <Input
+      type='email'
+      title="Enter your email address"
+      placeholder="janedoe@gmail.com"
+      iconKey={'EmailInputIcon'}
+    />
+  );
+};
+
+export default EmailInput;

compass/utils/classes/InputProps.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from "react";
+import { Icons } from "../constants";
+
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
+    title?: string; // Assuming title is always a string
+    type?: string;
+    placeholder?: string;
+  };