app/components/icons/notification.tsx

@@ -1,14 +1,15 @@
 import type { JSX, SVGProps } from 'react'
 
-type TNotificationIcon = {
+interface NotificationIconProperties
+  extends JSX.IntrinsicAttributes,
+    SVGProps<SVGSVGElement> {
   showBadge?: boolean
-} & JSX.IntrinsicAttributes &
+}
-  SVGProps<SVGSVGElement>
 
 export const NotificationIcon = ({
   showBadge = false,
   ...properties
-}: TNotificationIcon) => {
+}: NotificationIconProperties) => {
   return (
     <svg
       width={16}

app/components/ui/breadcrumb.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router'
 
-type BreadcrumbProperty = {
+// use slog or handel get by url
+interface BreadcrumbProperty {
   slug: string
 }
 

app/components/ui/card-report.tsx

@@ -1,7 +1,7 @@
 import { GraphIcon } from '~/components/icons/graph'
 import { formatNumberWithPeriods } from '~/utils/formatter'
 
-type CardReportProperty = {
+interface CardReportProperty {
   title: string
   amount: number
   url?: string

app/components/ui/social-share.tsx

@@ -8,7 +8,7 @@ import { LinkIcon } from '~/components/icons/link-icon'
 import { LinkedinIcon } from '~/components/icons/linkedin'
 import { XIcon } from '~/components/icons/x'
 
-type SocialMediaProperties = {
+interface SocialMediaProperties {
   className?: string
 }
 

app/pages/news-detail/index.tsx

@@ -1,5 +1,3 @@
-import htmlParse from 'html-react-parser'
-
 import { Breadcrumb } from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
 import { Carousel } from '~/components/ui/carousel'
@@ -33,7 +31,7 @@ export const NewsDetailPage = () => {
                 </p>
               </div>
             </div>
-            <IconsSocial className="ml-auto" />
+            <IconsSocial className="ml-auto"></IconsSocial>
           </div>
           {/* end next planing create component for this section */}
           <div className="w-full bg-amber-200">
@@ -44,7 +42,10 @@ export const NewsDetailPage = () => {
             />
           </div>
 
-          <article className="prose prose-stone">{htmlParse(content)}</article>
+          <article
+            className="prose prose-stone"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
           <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
             <div className="flex flex-col">
               <p className="mb-2">Share this post</p>

app/routes/_layout.admin._index.tsx

@@ -1,5 +0,0 @@
-import { redirect } from 'react-router'
-
-export async function loader() {
-  return redirect('/admin/dashboard')
-}