feat: implement getTags API and integrate with content creation form

app/components/ui/combobox.tsx

@@ -35,13 +35,26 @@ type TInputProperties<T extends FieldValues> = ComponentProps<
   rules?: RegisterOptions
   placeholder?: string
   options?: TComboboxOption[]
+  labelClassName?: string
+  containerClassName?: string
 }
 
 export const Combobox = <TFormValues extends Record<string, unknown>>(
   properties: TInputProperties<TFormValues>,
 ) => {
-  const { id, label, name, rules, disabled, placeholder, options, ...rest } =
-    properties
+  const {
+    id,
+    label,
+    name,
+    rules,
+    disabled,
+    placeholder,
+    options,
+    className,
+    labelClassName,
+    containerClassName,
+    ...rest
+  } = properties
   const {
     control,
     formState: { errors },
@@ -58,11 +71,11 @@ export const Combobox = <TFormValues extends Record<string, unknown>>(
 
   return (
     <Field
-      className="relative"
+      className={twMerge('relative', containerClassName)}
       disabled={disabled}
       id={id}
     >
-      <Label className="mb-1 block text-gray-700">
+      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
         {label} {error && <span className="text-red-500">{error.message}</span>}
       </Label>
       <Controller
@@ -82,7 +95,10 @@ export const Combobox = <TFormValues extends Record<string, unknown>>(
                 placeholder={placeholder}
                 displayValue={(option: TComboboxOption) => option?.name}
                 onChange={(event) => setQuery(event.target.value)}
-                className="focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
+                className={twMerge(
+                  'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+                  className,
+                )}
               />
               <ComboboxButton className="group absolute inset-y-0 right-0 px-2.5">
                 <ChevronDownIcon className="size-4 fill-gray-500" />