feat: implement upload dialog in admin dashboard with context management

app/components/ui/input-file.tsx

@@ -11,6 +11,8 @@ import {
 import { useRemixFormContext } from 'remix-hook-form'
 import { twMerge } from 'tailwind-merge'
 
+import { useAdminContext } from '~/contexts/admin'
+
 import { Button } from './button'
 
 type TInputProperties<T extends FieldValues> = Omit<
@@ -40,6 +42,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
     labelClassName,
     ...restProperties
   } = properties
+  const { setIsUploadOpen } = useAdminContext()
 
   const {
     register,
@@ -71,7 +74,9 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
         variant="icon"
         size="fit"
         className="absolute right-3 h-[42px]"
-        onClick={() => {}}
+        onClick={() => {
+          setIsUploadOpen('featured_image')
+        }}
       >
         <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
       </Button>

app/layouts/admin/dashboard.tsx

@@ -1,3 +1,4 @@
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
 import type { PropsWithChildren } from 'react'
 
 import { useAdminContext } from '~/contexts/admin'
@@ -7,7 +8,7 @@ import { Sidebar } from './sidebar'
 
 export const AdminDashboardLayout = (properties: PropsWithChildren) => {
   const { children } = properties
-  const {} = useAdminContext()
+  const { isUploadOpen, setIsUploadOpen } = useAdminContext()
   return (
     <div className="flex flex-col">
       <Navbar />
@@ -15,6 +16,28 @@ export const AdminDashboardLayout = (properties: PropsWithChildren) => {
         <Sidebar />
         <div className="min-h-[calc(100dvh-80px)] flex-1 p-8">{children}</div>
       </div>
+
+      <Dialog
+        open={!!isUploadOpen}
+        onClose={() => {
+          setIsUploadOpen(undefined)
+        }}
+        className="relative z-50"
+        transition
+      >
+        <DialogBackdrop
+          className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+          transition
+        />
+        <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+          <DialogPanel
+            transition
+            className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+          >
+            Upload di mari {isUploadOpen}
+          </DialogPanel>
+        </div>
+      </Dialog>
     </div>
   )
 }