style: update premium and normal status indicators for improved UI consistency

app/apis/admin/get-news.ts

@@ -0,0 +1,48 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const newsSchema = z.object({
+  data: z.array(
+    z.object({
+      id: z.string(),
+      title: z.string(),
+      content: z.string(),
+      categories: z.array(
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          code: z.string(),
+          created_at: z.string(),
+          updated_at: z.string(),
+        }),
+      ),
+      tags: z.array(
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          code: z.string(),
+          created_at: z.string(),
+          updated_at: z.string(),
+        }),
+      ),
+      is_premium: z.boolean(),
+      slug: z.string(),
+      featured_image: z.string(),
+      author_id: z.string(),
+      live_at: z.string(),
+      created_at: z.string(),
+      updated_at: z.string(),
+    }),
+  ),
+})
+
+export const getNews = async (parameters: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/news`)
+    return newsSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/components/text-editor/editor-button.tsx

@@ -21,8 +21,8 @@ export const EditorButton = (properties: TProperties) => {
       onClick={onClick}
       disabled={disabled}
       className={twMerge(
-        'flex h-6 w-8 items-center justify-center rounded-md text-xl hover:!bg-[#FCB017] disabled:cursor-not-allowed disabled:text-slate-400 disabled:opacity-50',
-        isActive ? 'bg-[#FCB01755]' : '',
+        'flex h-6 w-8 cursor-pointer items-center justify-center rounded-md p-2 hover:bg-[#2E2F7C] hover:text-white disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:hover:bg-[#2E2F7C]/50',
+        isActive ? 'bg-[#2E2F7C]/10' : '',
         className,
       )}
       style={style}

app/components/text-editor/editor-menubar.tsx

@@ -15,11 +15,9 @@ import {
   LinkIcon,
   LinkSlashIcon,
   ListBulletIcon,
-  MoonIcon,
   NumberedListIcon,
   PhotoIcon,
   StrikethroughIcon,
-  SunIcon,
   SwatchIcon,
 } from '@heroicons/react/20/solid'
 import type { Editor } from '@tiptap/react'
@@ -41,8 +39,6 @@ type TProperties = {
   editor: Editor | null
   setIsPlainHTML: Dispatch<SetStateAction<boolean>>
   category: string
-  darkMode: boolean
-  setDarkMode: Dispatch<SetStateAction<boolean>>
   disabled?: boolean
 }
 
@@ -51,8 +47,6 @@ export const EditorMenuBar = (properties: TProperties) => {
     editor,
     setIsPlainHTML,
     // category,
-    darkMode,
-    setDarkMode,
     disabled = false,
   } = properties
   // const [isOpenImage, setIsOpenImage] = useState(false)
@@ -114,14 +108,9 @@ export const EditorMenuBar = (properties: TProperties) => {
     }
   }
 
-  const toggleDark = () => {
-    setDarkMode(!darkMode)
-    // localStorage.setItem(editorKey, JSON.stringify(!darkMode))
-  }
-
   return (
     <>
-      <div className="flex items-start justify-between gap-4 rounded-[5px_5px_0_0] px-4 py-3">
+      <div className="flex items-start justify-between gap-4 px-4 py-3">
         <div className="flex divide-x">
           <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
             <EditorButton
@@ -384,13 +373,6 @@ export const EditorMenuBar = (properties: TProperties) => {
             >
               <ArrowUturnRightIcon />
             </EditorButton>
-            <EditorButton
-              onClick={() => toggleDark()}
-              title={darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
-              isActive={true}
-            >
-              {darkMode ? <MoonIcon /> : <SunIcon />}
-            </EditorButton>
           </div>
         </div>
         <div>
@@ -398,7 +380,6 @@ export const EditorMenuBar = (properties: TProperties) => {
             <EditorButton
               onClick={() => setIsPlainHTML(true)}
               title="Switch to Plain Text"
-              isActive={true}
             >
               <DocumentTextIcon />
             </EditorButton>

app/components/text-editor/editor-textarea.tsx

@@ -27,7 +27,6 @@ export const EditorTextArea = (properties: TProperties) => {
           <EditorButton
             onClick={() => setIsPlainHTML(false)}
             title="Switch to Rich Text"
-            isActive={true}
           >
             <CodeBracketSquareIcon />
           </EditorButton>

app/components/text-editor/index.tsx

@@ -53,7 +53,6 @@ export const TextEditor = <TFormValues extends Record<string, unknown>>(
 
   const [isPlainHTML, setIsPlainHTML] = useState(false)
   const [init, setInit] = useState(true)
-  const [darkMode, setDarkMode] = useState(false)
   const generatedId = useId()
 
   const {
@@ -123,22 +122,19 @@ export const TextEditor = <TFormValues extends Record<string, unknown>>(
           disabled={disabled}
         />
       ) : (
-        <div className={twMerge('', className)}>
+        <div className={twMerge('rounded-md', className)}>
           <EditorMenuBar
             disabled={disabled}
             category={category}
             editor={editor}
             setIsPlainHTML={setIsPlainHTML}
-            darkMode={darkMode}
-            setDarkMode={setDarkMode}
           />
           <EditorContent
             readOnly={disabled}
             editor={editor}
             id={id ?? generatedId}
             className={twMerge(
-              'prose-invert max-h-96 max-w-none cursor-text overflow-y-auto rounded-[0_0_5px_5px] border border-[#D2D2D2] p-2',
-              darkMode ? 'bg-[#00000055]' : '',
+              'prose prose-headings:my-0 prose-p:my-0 max-h-96 max-w-none cursor-text overflow-y-auto rounded-b-md p-2',
               inputClassName,
             )}
             onClick={() => editor?.commands.focus()}

app/components/ui/switch.tsx

@@ -56,15 +56,15 @@ export const Switch = <TFormValues extends Record<string, unknown>>(
         control={control}
         rules={rules}
         render={({ field }) => (
-          <div className={twMerge('flex items-center', inputClassName)}>
+          <div className={twMerge('flex items-center', className)}>
             <HeadlessSwitch
               checked={field.value}
               onChange={(checked) => {
                 field.onChange(checked)
               }}
               className={twMerge(
-                'group relative flex h-7 w-14 cursor-pointer rounded-full bg-black/10 p-1 shadow transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-black/10 data-[focus]:outline-1 data-[focus]:outline-white',
-                className,
+                'group relative flex h-7 w-14 cursor-pointer rounded-full bg-[#2E2F7C]/10 p-1 shadow transition-colors duration-200 ease-in-out focus:outline-none data-[checked]:bg-[#2E2F7C]/90 data-[focus]:outline-1 data-[focus]:outline-white',
+                inputClassName,
               )}
             >
               <span

app/pages/contents-create/index.tsx

@@ -25,7 +25,7 @@ export const contentSchema = z.object({
         .optional()
         .nullable(),
     )
-    .refine((data) => !!data, {
+    .refine((data) => data.length, {
       message: 'Please select a category',
     }),
   tags: z
@@ -182,7 +182,7 @@ export const CreateContentsPage = () => {
               name="is_premium"
               label="Premium"
               labelClassName="text-sm font-medium text-[#363636]"
-              inputClassName="h-[42px]"
+              className="h-[42px]"
             />
           </div>
 

app/pages/dashboard-contents/data.ts

@@ -1,4 +1,4 @@
-type TContens = {
+type TContents = {
   id: number
   createdAt: string
   author: string
@@ -8,7 +8,7 @@ type TContens = {
   status: string
 }
 
-export const CONTENTS: TContens[] = [
+export const CONTENTS: TContents[] = [
   {
     id: 1,
     createdAt: '24/10/2024',

app/pages/dashboard-contents/index.tsx

@@ -1,37 +1,39 @@
-import { Field, Input, Label, Select } from '@headlessui/react'
 import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
-import { SearchIcon } from '~/components/icons/search'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
-
-import { CONTENTS } from './data'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.contents'
 
 export const ContentsPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.contents',
+  )
+  const newsData = loaderData?.newsData
+
   DataTable.use(DT)
-  const dataTable = CONTENTS
+  const dataTable = newsData
   const dataColumns = [
     { title: 'No', data: 'id' },
-    { title: 'Tanggal Kontent', data: 'createdAt' },
-    { title: 'Nama Penulis', data: 'author' },
+    { title: 'Tanggal Konten', data: 'created_at' },
+    { title: 'Nama Penulis', data: 'author_id' },
     { title: 'Judul', data: 'title' },
-    { title: 'Kategori', data: 'category' },
+    // { title: 'Kategori', data: 'category' },
     {
       title: 'Tags',
-      data: 'tags',
+      data: 'is_premium',
       render: (value: string) => {
-        return value === 'Normal'
-          ? `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-2 py-1 rounded-md">${value}</span>`
-          : `<span class="bg-[#FFFCAF] px-2 py-1 rounded-md">${value}</span>`
+        return value
+          ? `<span class="bg-[#FFFCAF] text-[#DBCA6E] px-4 py-2 rounded-full">Premium</span>`
+          : `<span class="bg-[#F5F5F5] text-[#4C5CA0] px-4 py-2 rounded-full">Normal</span>`
       },
     },
-    {
-      title: 'Action',
-      data: 'id',
-    },
+    // {
+    //   title: 'Action',
+    //   data: 'id',
+    // },
   ]
   const dataSlot = {
     6: (value: string | number) => {
@@ -57,37 +59,8 @@ export const ContentsPage = () => {
   return (
     <div className="relative">
       <TitleDashboard title="Konten" />
-      <div className="mb-8 flex items-end justify-between">
-        <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
-          <div className="w-[400px]">
-            <Field>
-              <Label className="mb-2 block text-sm font-medium">
-                Cari User
-              </Label>
-              <div className="relative">
-                <Input
-                  type="text"
-                  placeholder="Cari Nama"
-                  className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                />
-                <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-                  <SearchIcon className="h-5 w-5" />
-                </div>
-              </div>
-            </Field>
-          </div>
-
-          <div className="w-[235px]">
-            <Field>
-              <Label className="mb-2 block text-sm font-medium">Status</Label>
-              <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
-                <option>Pilih Status</option>
-                <option>Aktif</option>
-                <option>Nonaktif</option>
-              </Select>
-            </Field>
-          </div>
-        </div>
+      <div className="mb-8 flex items-end justify-between gap-5">
+        <div className="flex-1">{/* TODO: Filter */}</div>
         <Button
           as={Link}
           to="/lg-admin/contents/create"

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

@@ -1,4 +1,16 @@
+import { getNews } from '~/apis/admin/get-news'
+import { handleCookie } from '~/libs/cookies'
 import { ContentsPage } from '~/pages/dashboard-contents'
 
+import type { Route } from './+types/_admin.lg-admin._dashboard.contents'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const { staffToken } = await handleCookie(request)
+  const { data: newsData } = await getNews({
+    accessToken: staffToken,
+  })
+  return { newsData }
+}
+
 const DashboardContentsLayout = () => <ContentsPage />
 export default DashboardContentsLayout