code clean

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';
@@ -41,10 +41,10 @@ export default function Page()  {
                         title="Enter your email address"
                         placeholder="janedoe@gmail.com"
                         value={confirmEmail}
-                        iconKey={'EmailInputIcon'}
+                        icon={'EmailInputIcon'}
                         onChange={(e) => {
                             setconfirmEmail(e.target.value);
-                            setEmailError(''); // Reset the error when the user types
+                            // 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/app/auth/newPassword/page.tsx

@@ -2,7 +2,7 @@
 "use client";
 import { useState, useEffect } from 'react'; 
 import Button from '@/components/Button1';
-import Input from '@/components/Input1';
+import Input from '@/components/Input';
 import Paper from '@/components/auth/Paper';
 
 

compass/app/page.tsx

@@ -1,7 +1,7 @@
 // pages/index.tsx
 "use client";
 
-import Button from '@/components/Button49';
+// import Button from '@/components/Button49';
 import Button from '@/components/Button1';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
@@ -54,7 +54,7 @@ export default function Page()  {
                     />
                     <h1 className='font-bold text-xl text-purple-800'>Login</h1>
                     <div className="mb-4">
-                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} required/>
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" icon={'EmailInputIcon'} onChange={handleEmailChange} required/>
                     </div>
                     <div className="mb-6">
                         <PasswordInput title="Password" onChange={handlePasswordChange} required />

compass/components/Input.tsx

@@ -1,41 +1,33 @@
-import { Icons } from '@/utils/constants';
+import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
-import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
 
 type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
+  icon?: ReactNode;
-  title?: string; // Assuming title is always a string
+  title?: ReactNode;
-  type?: string;
+  type?:ReactNode;
-  placeholder?: string;
+  placeholder?:ReactNode
+  valid?:boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void; 
 };
 
-const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
+const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid = true, ...rest }) => {
-  const IconComponent = iconKey ? Icons[iconKey] : null;
-  
   return (
-    <div className="mb-4">
+    <div>
-      {title && (
+      <label
-        <div className="mb-1">
+  htmlFor={title}
-          <label htmlFor={title} className="text-sm font-semibold text-gray-700">
+  // this class name should be simplified, was just having problems with it
-            {title}
+  className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
-          </label>
+>
-        </div>
+  <span className="text-xs font-semibold text-gray-700"> {title} </span>
-      )}
+
-      <div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
+  <input
-        {IconComponent && (
+    type={type}
-          <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
+    id={title}
-            <IconComponent className="h-5 w-5" />
+    placeholder={placeholder}
-          </span>
+    onChange={onChange}
-        )}
+    className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
-        <input
+  />
-          {...rest}
+</label>
-          type={type}
+</div>
-          id={title}
-          placeholder={placeholder}
-          className="w-full border-none p-3 text-sm focus:ring-0"
-          style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
-        />
-      </div>
-    </div>
   );
 };
 

compass/components/Input1.tsx

@@ -1,34 +0,0 @@
-import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
-
-type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  icon?: ReactNode;
-  title?: ReactNode;
-  type?:ReactNode;
-  placeholder?:ReactNode
-  valid?:boolean;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void; 
-};
-
-const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
-  return (
-    <div>
-      <label
-  htmlFor={title}
-  // this class name should be simplified, was just having problems with it
-  className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
->
-  <span className="text-xs font-semibold text-gray-700"> {title} </span>
-
-  <input
-    type={type}
-    id={title}
-    placeholder={placeholder}
-    onChange={onChange}
-    className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
-  />
-</label>
-</div>
-  );
-};
-
-export default Input;

compass/components/InputOld.tsx

@@ -0,0 +1,42 @@
+import { Icons } from '@/utils/constants';
+import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+
+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;
+};
+
+const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
+  const IconComponent = iconKey ? Icons[iconKey] : null;
+  
+  return (
+    <div className="mb-4">
+      {title && (
+        <div className="mb-1">
+          <label htmlFor={title} className="text-sm font-semibold text-gray-700">
+            {title}
+          </label>
+        </div>
+      )}
+      <div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
+        {IconComponent && (
+          <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
+            <IconComponent className="h-5 w-5" />
+          </span>
+        )}
+        <input
+          {...rest}
+          type={type}
+          id={title}
+          placeholder={placeholder}
+          className="w-full border-none p-3 text-sm focus:ring-0"
+          style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Input;