feat: enhance Input component with placeholder support and styling adjustments

app/components/ui/input.tsx

@@ -7,6 +7,7 @@ import {
   type RegisterOptions,
 } from 'react-hook-form'
 import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
 
 import { EyeIcon } from '~/components/icons/eye'
 
@@ -25,7 +26,15 @@ type TInputProperties<T extends FieldValues> = Omit<
 export const Input = <TFormValues extends Record<string, unknown>>(
   properties: TInputProperties<TFormValues>,
 ) => {
-  const { id, label, name, rules, type = 'text', ...rest } = properties
+  const {
+    id,
+    label,
+    name,
+    rules,
+    type = 'text',
+    placeholder,
+    ...rest
+  } = properties
   const [inputType, setInputType] = useState(type)
 
   const {
@@ -46,7 +55,8 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       <input
         id={id}
         type={inputType}
-        className="w-full rounded-md border border-[#DFDFDF] p-2"
+        className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
+        placeholder={inputType === 'password' ? '******' : placeholder}
         {...register(name, rules)}
         {...rest}
       />
@@ -55,22 +65,17 @@ export const Input = <TFormValues extends Record<string, unknown>>(
           type="button"
           variant="icon"
           size="fit"
-          className="absolute top-9 right-3 text-gray-500"
+          className="absolute right-3 h-[42px] text-gray-500"
           onClick={() =>
             setInputType(inputType === 'password' ? 'text' : 'password')
           }
         >
-          {inputType === 'password' ? (
+          <EyeIcon
-            <EyeIcon
+            className={twMerge(
-              width={15}
+              'h-4 w-4',
-              height={15}
+              inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
-            />
+            )}
-          ) : (
+          />
-            <EyeIcon
-              width={15}
-              height={15}
-            />
-          )}
         </Button>
       )}
     </div>

app/layouts/news/form-login.tsx

@@ -98,6 +98,7 @@ export const FormLogin = (properties: TProperties) => {
                 }}
                 className="font-semibold text-[#2E2F7C]"
                 variant="link"
+                size="fit"
               >
                 Reset Kata Sandi
               </Button>