feat: refactor components to use named exports for better consistency

app/components/ui/banner.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router'
 
 import { APP } from '~/data/meta'
 
-export default function Banner() {
+export const Banner = () => {
   return (
     <div className="min-h-[65px] sm:mx-10">
       <div className="relative">

app/components/ui/breadcrumb.tsx

@@ -5,7 +5,7 @@ interface BreadcrumbProperty {
   slug: string
 }
 
-const Breadcrumb = (property: BreadcrumbProperty) => {
+export const Breadcrumb = (property: BreadcrumbProperty) => {
   const { slug } = property
   return (
     <div className="flex items-center gap-2">
@@ -20,5 +20,3 @@ const Breadcrumb = (property: BreadcrumbProperty) => {
     </div>
   )
 }
-
-export default Breadcrumb

app/components/ui/social-share.tsx

@@ -40,7 +40,7 @@ const dataSocialMedia = [
   },
 ]
 
-const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
+export const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
   return (
     <div className={twMerge('flex gap-2', className)}>
       {dataSocialMedia.map(({ url, icon: Icon }, index) => (
@@ -56,5 +56,3 @@ const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
     </div>
   )
 }
-
-export default IconsSocial

app/layouts/news/default.tsx

@@ -2,9 +2,9 @@ import { type PropsWithChildren } from 'react'
 
 import { PopupModal } from '~/components/popup/modal'
 import { SuccessModal } from '~/components/popup/success-modal'
-import Banner from '~/components/ui/banner'
+import { Banner } from '~/components/ui/banner'
 import { useNewsContext } from '~/contexts/news'
-import FormForgotPassword from '~/layouts/news/form-forgot-password'
+import { FormForgotPassword } from '~/layouts/news/form-forgot-password'
 import { FormLogin } from '~/layouts/news/form-login'
 import { FormRegister } from '~/layouts/news/form-register'
 

app/layouts/news/form-forgot-password.tsx

@@ -1,6 +1,6 @@
 import { Button } from '~/components/ui/button'
 
-export default function FormForgotPassword() {
+export const FormForgotPassword = () => {
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full max-w-md">

app/pages/news-detail/index.tsx

@@ -1,7 +1,7 @@
-import Breadcrumb from '~/components/ui/breadcrumb'
+import { Breadcrumb } from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
 import { Carousel } from '~/components/ui/carousel'
-import IconsSocial from '~/components/ui/social-share'
+import { IconsSocial } from '~/components/ui/social-share'
 
 import { BERITA, CONTENT } from './data'