feat: add AdminContext for managing upload state in admin dashboard

app/contexts/admin.tsx

@@ -0,0 +1,47 @@
+import {
+  createContext,
+  useState,
+  useContext,
+  type PropsWithChildren,
+  type Dispatch,
+  type SetStateAction,
+} from 'react'
+
+type TUpload =
+  | 'featured_image'
+  | 'ads'
+  | 'content'
+  | 'profile_picture'
+  | undefined
+
+type AdminContextProperties = {
+  isUploadOpen: TUpload
+  setIsUploadOpen: Dispatch<SetStateAction<TUpload>>
+}
+
+const AdminContext = createContext<AdminContextProperties | undefined>(
+  undefined,
+)
+
+export const AdminProvider = ({ children }: PropsWithChildren) => {
+  const [isUploadOpen, setIsUploadOpen] = useState<TUpload>()
+
+  return (
+    <AdminContext.Provider
+      value={{
+        isUploadOpen,
+        setIsUploadOpen,
+      }}
+    >
+      {children}
+    </AdminContext.Provider>
+  )
+}
+
+export const useAdminContext = (): AdminContextProperties => {
+  const context = useContext(AdminContext)
+  if (!context) {
+    throw new Error('useAdminContext must be used within a AdminProvider')
+  }
+  return context
+}

app/layouts/admin/dashboard.tsx

@@ -1,10 +1,13 @@
 import type { PropsWithChildren } from 'react'
 
+import { useAdminContext } from '~/contexts/admin'
+
 import { Navbar } from './navbar'
 import { Sidebar } from './sidebar'
 
 export const AdminDashboardLayout = (properties: PropsWithChildren) => {
   const { children } = properties
+  const {} = useAdminContext()
   return (
     <div className="flex flex-col">
       <Navbar />

app/routes/_admin.lg-admin._dashboard.tsx

@@ -2,6 +2,7 @@ import { Outlet } from 'react-router'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getTags } from '~/apis/common/get-tags'
+import { AdminProvider } from '~/contexts/admin'
 import { AdminDashboardLayout } from '~/layouts/admin/dashboard'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard'
@@ -18,9 +19,11 @@ export const loader = async ({}: Route.LoaderArgs) => {
 
 const DashboardLayout = () => {
   return (
-    <AdminDashboardLayout>
-      <Outlet />
-    </AdminDashboardLayout>
+    <AdminProvider>
+      <AdminDashboardLayout>
+        <Outlet />
+      </AdminDashboardLayout>
+    </AdminProvider>
   )
 }
 export default DashboardLayout