From 6082cf0cdbbe4f5ca5ab6320c84f3a391e244abe Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Mon, 24 Feb 2025 08:23:22 +0800
Subject: [PATCH] refactor: replace interface with type for component
 properties and improve code readability

---
 app/components/icons/notification.tsx | 9 ++++-----
 app/components/ui/breadcrumb.tsx      | 3 +--
 app/components/ui/card-report.tsx     | 2 +-
 app/components/ui/social-share.tsx    | 2 +-
 app/pages/news-detail/index.tsx       | 9 ++++-----
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/app/components/icons/notification.tsx b/app/components/icons/notification.tsx
index e385b6a..22ca578 100644
--- a/app/components/icons/notification.tsx
+++ b/app/components/icons/notification.tsx
@@ -1,15 +1,14 @@
 import type { JSX, SVGProps } from 'react'
 
-interface NotificationIconProperties
-  extends JSX.IntrinsicAttributes,
-    SVGProps<SVGSVGElement> {
+type TNotificationIcon = {
   showBadge?: boolean
-}
+} & JSX.IntrinsicAttributes &
+  SVGProps<SVGSVGElement>
 
 export const NotificationIcon = ({
   showBadge = false,
   ...properties
-}: NotificationIconProperties) => {
+}: TNotificationIcon) => {
   return (
     <svg
       width={16}
diff --git a/app/components/ui/breadcrumb.tsx b/app/components/ui/breadcrumb.tsx
index 64ee087..3a10b57 100644
--- a/app/components/ui/breadcrumb.tsx
+++ b/app/components/ui/breadcrumb.tsx
@@ -1,7 +1,6 @@
 import { Link } from 'react-router'
 
-// use slog or handel get by url
-interface BreadcrumbProperty {
+type BreadcrumbProperty = {
   slug: string
 }
 
diff --git a/app/components/ui/card-report.tsx b/app/components/ui/card-report.tsx
index cb85a9e..231e12f 100644
--- a/app/components/ui/card-report.tsx
+++ b/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
diff --git a/app/components/ui/social-share.tsx b/app/components/ui/social-share.tsx
index 7095ebc..2e6385e 100644
--- a/app/components/ui/social-share.tsx
+++ b/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
 }
 
diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx
index 30fc0ea..04e835d 100644
--- a/app/pages/news-detail/index.tsx
+++ b/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
-            className="prose prose-stone"
-            dangerouslySetInnerHTML={{ __html: content }}
-          />
+          <article className="prose prose-stone">{htmlParse(content)}</article>
           <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>