feat: refactor components to use named exports for better tree-shaking

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