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
-  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}

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
 }
 

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
 }