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" />

app/components/ui/input.tsx

@@ -35,6 +35,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
     type = 'text',
     placeholder,
     disabled,
+    className,
     ...rest
   } = properties
   const [inputType, setInputType] = useState(type)
@@ -57,7 +58,10 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       </Label>
       <HeadlessInput
         type={inputType}
-        className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
+        className={twMerge(
+          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+          className,
+        )}
         placeholder={inputType === 'password' ? '******' : placeholder}
         {...register(name, rules)}
         {...rest}

app/components/ui/text-editor.tsx

@@ -19,6 +19,7 @@ import {
 const DefaultTextEditor = () => {
   const editor = useEditor({
     extensions: [StarterKit],
+    immediatelyRender: false,
     content:
       '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis nisl cursus bibendum sit nulla accumsan sodales ornare. At urna viverra non suspendisse neque, lorem. Pretium condimentum pellentesque gravida id etiam sit sed arcu euismod. Rhoncus proin orci duis scelerisque molestie cursus tincidunt aliquam.</p>',
   })

app/components/ui/title-dashboard.tsx

@@ -4,7 +4,7 @@ type TitleDashboardProperties = {
 export const TitleDashboard = (properties: TitleDashboardProperties) => {
   const { title } = properties
   return (
-    <div className="container mx-auto">
+    <div className="container">
       <div className="mb-5 flex items-center justify-between">
         <h1 className="text-xl font-bold">{title}</h1>
       </div>