feat: implement file upload functionality and enhance admin dashboard layout

app/components/ui/input-file.tsx

@@ -1,6 +1,6 @@
 import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
 import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
-import { type ComponentProps, type ReactNode } from 'react'
+import { useEffect, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
   type FieldError,
@@ -42,15 +42,23 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
     labelClassName,
     ...restProperties
   } = properties
-  const { setIsUploadOpen } = useAdminContext()
+  const { setIsUploadOpen, uploadedFile } = useAdminContext()
 
   const {
     register,
     formState: { errors },
+    setValue,
   } = useRemixFormContext()
 
   const error: FieldError = get(errors, name)
 
+  useEffect(() => {
+    if (uploadedFile) {
+      setValue('featured_image', uploadedFile)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFile])
+
   return (
     <Field
       className={twMerge('relative', containerClassName)}