refactor: enhance news handling and improve content display in various components

app/pages/form-contents/index.tsx

@@ -48,7 +48,9 @@ export const contentSchema = z.object({
   content: z.string().min(1, {
     message: 'Konten is required',
   }),
-  featured_image: z.string().optional(),
+  featured_image: z.string().url({
+    message: 'Gambar Unggulan must be a valid URL',
+  }),
   is_premium: z.boolean().optional(),
   live_at: z.string().min(1, {
     message: 'Tanggal live is required',

app/pages/news-categories/index.tsx

@@ -4,14 +4,12 @@ import { Card } from '~/components/ui/card'
 import { CategorySection } from '~/components/ui/category-section'
 import type { loader } from '~/routes/_news.category.$code'
 
-import { BERITA } from './data'
-
 export const NewsCategoriesPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_news.category.$code',
   )
-  const { name, description } = loaderData?.categoryData || {}
-  const { items } = BERITA
+  const { categoryData, newsData } = loaderData || {}
+  const { name, description } = categoryData || {}
 
   return (
     <div className="relative">
@@ -19,7 +17,7 @@ export const NewsCategoriesPage = () => {
         <CategorySection
           title={name || ''}
           description={description || ''}
-          items={items}
+          items={newsData || []}
         />
       </Card>
     </div>

app/pages/news-detail/index.tsx

@@ -49,7 +49,7 @@ export const NewsDetailPage = () => {
           </div>
 
           <div className="mt-8 flex items-center justify-center">
-            <article className="prose prose-stone">
+            <article className="prose prose-headings:my-0.5 prose-p:my-0.5">
               {content && htmlParse(content)}
             </article>
           </div>