refactor: replace interface with type for component properties and improve code readability

app/components/icons/notification.tsx

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

app/components/ui/breadcrumb.tsx

@@ -1,7 +1,6 @@
 import { Link } from 'react-router'
 
-// use slog or handel get by url
+type BreadcrumbProperty = {
-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'
 
-interface CardReportProperty {
+type 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'
 
-interface SocialMediaProperties {
+type SocialMediaProperties = {
   className?: string
 }
 

app/pages/news-detail/index.tsx

@@ -1,3 +1,5 @@
+import htmlParse from 'html-react-parser'
+
 import { Breadcrumb } from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
 import { Carousel } from '~/components/ui/carousel'
@@ -31,7 +33,7 @@ export const NewsDetailPage = () => {
                 </p>
               </div>
             </div>
-            <IconsSocial className="ml-auto"></IconsSocial>
+            <IconsSocial className="ml-auto" />
           </div>
           {/* end next planing create component for this section */}
           <div className="w-full bg-amber-200">
@@ -42,10 +44,7 @@ export const NewsDetailPage = () => {
             />
           </div>
 
-          <article
+          <article className="prose prose-stone">{htmlParse(content)}</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>