From 9592062732093bcd478505cd854588c2c1a48abf Mon Sep 17 00:00:00 2001
From: Meliora Ho <nho10@fordham.edu>
Date: Sun, 18 Feb 2024 03:14:15 +0000
Subject: [PATCH] Edited Input UI

---
 compass/app/page.tsx         |  4 +--
 compass/components/Input.tsx | 54 ++++++++++++++++++++++--------------
 compass/utils/constants.tsx  | 10 +++----
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index 48493ae..756075c 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -16,10 +16,10 @@ export default function Page()  {
             <Paper>
                 <form className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
                     <div className="mb-4">
-                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" />
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} />
                     </div>
                     <div className="mb-6">
-                        <Input type='password' title="Password" />
+                        <Input type='password' title="Password"  />
                     </div>
                     <div className="flex flex-col items-left space-y-4">
                         <InlineLink>
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index 618295b..5997296 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -1,29 +1,41 @@
-import React, { FunctionComponent, InputHTMLAttributes, ReactNode } from 'react';
+import { Icons } from '@/utils/constants';
+import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
 
 type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  icon?: ReactNode;
-  title?: ReactNode;
-  type?:ReactNode;
-  placeholder?:ReactNode
+  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> = ({ icon, type, title, placeholder, ...rest }) => {
+const Input: FunctionComponent<InputProps> = ({ iconKey, type, title, placeholder, ...rest }) => {
+  const IconComponent = iconKey ? Icons[iconKey] : null;
+  
   return (
-    <div>
-      <label
-  htmlFor={title}
-  className="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"
->
-  <span className="text-xs font-semibold text-gray-700"> {title} </span>
-
-  <input
-    type={type}
-    id={title}
-    placeholder={placeholder}
-    className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
-  />
-</label>
-</div>
+    <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>
   );
 };
 
diff --git a/compass/utils/constants.tsx b/compass/utils/constants.tsx
index ad0169d..d715bb7 100644
--- a/compass/utils/constants.tsx
+++ b/compass/utils/constants.tsx
@@ -47,8 +47,8 @@ export enum DATATYPE {
     SELECT
 }
 
-export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = {
-    [COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon),
-    [COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon),
-    [COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon)
-}
\ No newline at end of file
+// export const COLLECTION_MAP: {[key in COLLECTION]: CollectionImpl} = {
+//     [COLLECTION.RESOURCE]: new CollectionImpl('Resources', Icons.ResourceIcon),
+//     [COLLECTION.SERVICE]: new CollectionImpl('Services', Icons.ServiceIcon),
+//     [COLLECTION.USER]: new CollectionImpl('Users', Icons.UserIcon)
+// }
\ No newline at end of file