Use Links component to manipulate anchors

Georiviere · Nov 10, 2023 · 4c49d0a · 4c49d0a
1 parent 7ba8acd
commit 4c49d0a
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/src/components/map-menu.tsx b/src/components/map-menu.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
@@ -22,39 +23,39 @@ export default function MapMenu() {
         )}
       >
         <li className="lg:hidden">
-          <a
+          <Link
             className={cn(
               'flex h-full items-center rounded-sm  px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
               // hash === '#search' && 'bg-accent text-accent-foreground',
             )}
             href="#search"
           >
             {t('search')}
-          </a>
+          </Link>
         </li>
         {hasContent && (
           <li>
-            <a
+            <Link
               className={cn(
                 'flex h-full items-center rounded-sm px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                 // hash === '#content' && 'bg-accent text-accent-foreground',
               )}
               href="#content"
             >
               {contentLabel}
-            </a>
+            </Link>
           </li>
         )}
         <li>
-          <a
+          <Link
             className={cn(
               'flex h-full items-center rounded-sm  px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
               // hash === '#map' && 'bg-accent text-accent-foreground',
             )}
-            href={`#map`}
+            href="#map"
           >
             {t('map')}
-          </a>
+          </Link>
         </li>
       </ul>
     </nav>