From 60d11fbfa2790d0f143ea2db5a4b334883be5315 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Mon, 10 Mar 2025 16:51:59 +0800
Subject: [PATCH] fix: replace standard input with Headless UI Input component
 in FormUpload

---
 app/layouts/admin/form-upload.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/layouts/admin/form-upload.tsx b/app/layouts/admin/form-upload.tsx
index 3ee6801..425e6c7 100644
--- a/app/layouts/admin/form-upload.tsx
+++ b/app/layouts/admin/form-upload.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@headlessui/react'
+import { Button, Input } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState, type ChangeEvent } from 'react'
 import { useFetcher } from 'react-router'
@@ -96,10 +96,11 @@ export const FormUpload = () => {
         {error && (
           <div className="text-sm text-red-500 capitalize">{error}</div>
         )}
-        <input
+        <Input
           type="file"
           id="input-file-upload"
           accept="image/*"
+          className="h-[42px] w-full cursor-pointer rounded-md border border-[#DFDFDF] p-2"
           onChange={handleChange}
         />
         <input