refactor: set default props of Link to custom link

Author: pooriaset

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Link as NextLink } from '@/navigation';
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import type { FC } from 'react';
@@ -23,13 +22,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({ items }) => {
         {items.map((item) => {
           const href = '';
           return (
-            <Link
-              key={item.id}
-              variant="body2"
-              component={NextLink}
-              underline="hover"
-              href={href}
-            >
+            <Link key={item.id} variant="body2" underline="hover" href={href}>
               {item.title}
             </Link>
           );

src/components/Footer/components/DesktopFooter.tsx

@@ -36,13 +36,9 @@ const Footer = () => {
           align="center"
           sx={{ display: 'flex', alignItems: 'center', gap: 2 }}
         >
-          <Link component={NextLink} href="#">
-            {t('footer.links.aboutUs')}
-          </Link>
+          <Link href="#">{t('footer.links.aboutUs')}</Link>
 
-          <Link component={NextLink} href="#">
-            {t('footer.links.contactUs')}
-          </Link>
+          <Link href="#">{t('footer.links.contactUs')}</Link>
         </Typography>
       </Container>
     </Box>

src/components/Footer/components/MobileFooter.tsx

@@ -10,7 +10,6 @@ import MuiBottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import Box from '@mui/material/Box';
 import { useTranslations } from 'next-intl';
-import { Link as NextLink } from '@/navigation';
 import { usePathname } from 'next/navigation';
 import { ReactNode } from 'react';
 
@@ -64,7 +63,6 @@ const MobileFooter = () => {
           return (
             <BottomNavigationAction
               key={page.label}
-              LinkComponent={NextLink}
               href={page.href}
               label={page.label}
               icon={page.icon}

src/components/Header/components/TopSection.tsx

@@ -59,7 +59,6 @@ const TopSection: FC = () => {
     <>
       <Toolbar disableGutters>
         <Link
-          component={NextLink}
           href="/"
           sx={{
             display: 'flex',

src/config/theme.ts

@@ -1,6 +1,11 @@
 'use client';
 
-import { createTheme, type GlobalStylesProps } from '@mui/material';
+import { Link } from '@/navigation';
+import {
+  ThemeOptions,
+  createTheme,
+  type GlobalStylesProps,
+} from '@mui/material';
 import { green, grey } from '@mui/material/colors';
 
 export const globalStyles: GlobalStylesProps['styles'] = {
@@ -9,7 +14,7 @@ export const globalStyles: GlobalStylesProps['styles'] = {
   },
 };
 
-const themeOptions = {
+const themeOptions: ThemeOptions = {
   palette: {
     primary: {
       main: green[500],
@@ -19,6 +24,16 @@ const themeOptions = {
     borderRadius: 8,
   },
   components: {
+    MuiLink: {
+      defaultProps: {
+        component: Link,
+      },
+    },
+    MuiBottomNavigationAction: {
+      defaultProps: {
+        component: Link,
+      },
+    },
     MuiCard: {
       defaultProps: {
         elevation: 0,