feat: add TextEditor component

app/pages/contents-create/index.tsx

@@ -5,10 +5,10 @@ import { useFetcher, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import { TextEditor } from '~/components/text-editor'
 import { Button } from '~/components/ui/button'
 import { Combobox } from '~/components/ui/combobox'
 import { Input } from '~/components/ui/input'
-import DefaultTextEditor from '~/components/ui/text-editor'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin'
 
@@ -38,10 +38,10 @@ export const contentSchema = z.object({
       .nullable(),
   ),
   title: z.string().min(1, {
-    message: 'Title is required',
+    message: 'Judul is required',
   }),
   content: z.string().min(1, {
-    message: 'Content is required',
+    message: 'Konten is required',
   }),
   featured_image: z.string().optional(),
   is_premium: z.boolean().optional(),
@@ -95,6 +95,24 @@ export const CreateContentsPage = () => {
           {error && (
             <div className="text-sm text-red-500 capitalize">{error}</div>
           )}
+          <div className="flex items-end justify-between gap-4">
+            <Input
+              id="title"
+              label="Judul"
+              placeholder="Masukkan Judul"
+              name="title"
+              className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+              containerClassName="flex-1"
+            />
+            <Input
+              id="featured_image"
+              label="Gambar Unggulan"
+              placeholder="Masukkan Gambar Unggulan"
+              name="featured_image"
+              className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+              containerClassName="flex-1"
+            />
+          </div>
           <div className="flex items-end justify-between gap-4">
             <Combobox
               multiple
@@ -144,9 +162,14 @@ export const CreateContentsPage = () => {
             </Button>
           </div>
 
-          <section>
-            <DefaultTextEditor />
-          </section>
+          <TextEditor
+            id="content"
+            name="content"
+            label="Konten"
+            placeholder="Masukkan Konten"
+            className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+            category="content"
+          />
         </fetcher.Form>
       </RemixFormProvider>