feat: update API endpoint for ad creation and enhance InputFile component with category prop

app/apis/admin/create-ads.ts

@@ -17,7 +17,7 @@ export const createAdsRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   try {
     const { data } = await HttpServer(restParameters).post(
-      '/api/advertisements/create',
+      '/api/ads/create',
       payload,
     )
     return advertisementsResponseSchema.parse(data)

app/components/ui/input-file.tsx

@@ -1,13 +1,7 @@
 import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
 import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
 import { useEffect, type ComponentProps, type ReactNode } from 'react'
-import {
-  get,
-  type FieldError,
-  type FieldValues,
-  type Path,
-  type RegisterOptions,
-} from 'react-hook-form'
+import { get, type FieldError, type RegisterOptions } from 'react-hook-form'
 import { useRemixFormContext } from 'remix-hook-form'
 import { twMerge } from 'tailwind-merge'
 
@@ -15,22 +9,17 @@ import { useAdminContext, type TUpload } from '~/contexts/admin'
 
 import { Button } from './button'
 
-type TInputProperties<T extends FieldValues> = Omit<
-  ComponentProps<'input'>,
-  'size'
-> & {
+type TInputProperties = Omit<ComponentProps<'input'>, 'size'> & {
   id: string
   label?: ReactNode
-  name: Path<T>
+  name: string
   rules?: RegisterOptions
   containerClassName?: string
   labelClassName?: string
-  category?: string
+  category: TUpload
 }
 
-export const InputFile = <TFormValues extends Record<string, unknown>>(
-  properties: TInputProperties<TFormValues>,
-) => {
+export const InputFile = (properties: TInputProperties) => {
   const {
     id,
     label,
@@ -56,8 +45,8 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
   const error: FieldError = get(errors, name)
 
   useEffect(() => {
-    if (uploadedFile && isUploadOpen === name) {
-      setValue(name as string, uploadedFile)
+    if (uploadedFile && isUploadOpen === (category || name)) {
+      setValue(name, uploadedFile)
       setUploadedFile(undefined)
       setIsUploadOpen(undefined)
     }
@@ -88,7 +77,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
         size="fit"
         className="absolute right-3 h-[42px]"
         onClick={() => {
-          setIsUploadOpen((category || name) as TUpload)
+          setIsUploadOpen(category)
         }}
       >
         <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />

app/pages/dashboard-advertisements/index.tsx

@@ -35,13 +35,11 @@ export const AdvertisementsPage = () => {
   const dataSlot: DataTableSlots = {
     1: (value: string) => {
       return (
-        <div>
-          <img
-            src={value}
-            alt={value}
-            className="aspect-[15/1] h-[50px] max-h-[100px] min-h-[65px] rounded object-cover"
-          />
-        </div>
+        <img
+          src={value}
+          alt={value}
+          className="aspect-[150/1] h-[50px] rounded object-contain"
+        />
       )
     },
     3: (value: string) => (

app/pages/form-advertisements/index.tsx

@@ -75,6 +75,7 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
                 className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                 labelClassName="text-sm font-medium text-[#363636]"
                 containerClassName="flex-1"
+                category="ads"
               />
               <Input
                 id="url"

app/pages/form-contents/index.tsx

@@ -139,6 +139,7 @@ export const FormContentsPage = (properties: TProperties) => {
               className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
               labelClassName="text-sm font-medium text-[#363636]"
               containerClassName="flex-1"
+              category="featured_image"
             />
             <Button
               isLoading={fetcher.state !== 'idle'}