feat: add InputFile component for file uploads and integrate into FormContentsPage

app/components/ui/input-file.tsx

@@ -0,0 +1,80 @@
+import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
+import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
+import { type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+import { Button } from './button'
+
+type TInputProperties<T extends FieldValues> = Omit<
+  ComponentProps<'input'>,
+  'size'
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+}
+
+export const InputFile = <TFormValues extends Record<string, unknown>>(
+  properties: TInputProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    placeholder,
+    disabled,
+    className,
+    containerClassName,
+    labelClassName,
+    ...restProperties
+  } = properties
+
+  const {
+    register,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className={twMerge('relative', containerClassName)}
+      disabled={disabled}
+      id={id}
+    >
+      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <HeadlessInput
+        className={twMerge(
+          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+          className,
+        )}
+        placeholder={placeholder}
+        {...register(name, rules)}
+        {...restProperties}
+      />
+      <Button
+        type="button"
+        variant="icon"
+        size="fit"
+        className="absolute right-3 h-[42px]"
+        onClick={() => {}}
+      >
+        <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+      </Button>
+    </Field>
+  )
+}

app/components/ui/input.tsx

@@ -75,7 +75,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
           type="button"
           variant="icon"
           size="fit"
-          className="absolute right-3 h-[42px] text-gray-500"
+          className="absolute right-3 h-[42px]"
           onClick={() =>
             setInputType(inputType === 'password' ? 'text' : 'password')
           }

app/pages/form-contents/index.tsx

@@ -10,6 +10,7 @@ import { TextEditor } from '~/components/text-editor'
 import { Button } from '~/components/ui/button'
 import { Combobox } from '~/components/ui/combobox'
 import { Input } from '~/components/ui/input'
+import { InputFile } from '~/components/ui/input-file'
 import { Switch } from '~/components/ui/switch'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard'
@@ -133,7 +134,7 @@ export const FormContentsPage = (properties: TProperties) => {
               containerClassName="flex-1"
               disabled={!!newsData}
             />
-            <Input
+            <InputFile
               id="featured_image"
               label="Gambar Unggulan"
               placeholder="Masukkan Url Gambar Unggulan"