From 78b28a0c05f4bf3ed72386743f3fb518953365dd Mon Sep 17 00:00:00 2001
From: Patric Stout <truebrain@openttd.org>
Date: Sun, 28 Apr 2024 15:46:32 +0200
Subject: [PATCH] fix: use next/link instead of "a" for Anchor (#1)

---
 src/app/MainPage.tsx                          |  3 +-
 src/app/language/[language]/Listing.tsx       |  3 +-
 src/app/languages/Listing.tsx                 |  3 +-
 src/app/project/[project]/Listing.tsx         |  3 +-
 src/app/projects/Listing.tsx                  |  3 +-
 .../[project]/[language]/Listing.tsx          |  9 +++---
 src/components/Header.tsx                     | 29 ++++++++++---------
 7 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/app/MainPage.tsx b/src/app/MainPage.tsx
index d119336..64f7875 100644
--- a/src/app/MainPage.tsx
+++ b/src/app/MainPage.tsx
@@ -1,5 +1,6 @@
 'use client'
 import React from "react";
+import Link from "next/link";
 import { Button, Group, List, Text, ThemeIcon, Title, rem } from "@mantine/core";
 import { IconCheck } from "@tabler/icons-react";
 
@@ -39,7 +40,7 @@ export const MainPage = () => {
           <Button radius="xl" size="md">
             Get started
           </Button>
-          <Button variant="default" radius="xl" size="md" component="a" href="/languages">
+          <Button variant="default" radius="xl" size="md" component={Link} href="/languages">
             Supported languages
           </Button>
         </Group>
diff --git a/src/app/language/[language]/Listing.tsx b/src/app/language/[language]/Listing.tsx
index 39bc52d..9845a37 100644
--- a/src/app/language/[language]/Listing.tsx
+++ b/src/app/language/[language]/Listing.tsx
@@ -1,5 +1,6 @@
 'use client'
 import React from "react";
+import Link from "next/link";
 import { Anchor, Box, Table } from "@mantine/core";
 import { ConfigContext } from "@/providers/ConfigProvider";
 import { LanguageContext } from "@/providers/LanguageProvider";
@@ -19,7 +20,7 @@ export const Listing = () => {
         <Table.Tbody>
           {Object.keys(config.projects).filter(key => config.projects[key].languages.includes(language.language)).map((key) => (
             <Table.Tr key={key}>
-              <Table.Td><Anchor size="sm" component="a" href={`/translation/${key}/${language.language}`}>{config.projects[key].name}</Anchor></Table.Td>
+              <Table.Td><Anchor size="sm" component={Link} href={`/translation/${key}/${language.language}`}>{config.projects[key].name}</Anchor></Table.Td>
             </Table.Tr>
           ))}
         </Table.Tbody>
diff --git a/src/app/languages/Listing.tsx b/src/app/languages/Listing.tsx
index 82ce32e..e4a7e67 100644
--- a/src/app/languages/Listing.tsx
+++ b/src/app/languages/Listing.tsx
@@ -1,5 +1,6 @@
 'use client'
 import React from "react";
+import Link from 'next/link';
 import { Anchor, Box, Table } from "@mantine/core";
 import { ConfigContext } from "@/providers/ConfigProvider";
 
@@ -19,7 +20,7 @@ export const Listing = () => {
         <Table.Tbody>
           {Object.keys(config.languages).map((key) => (
             <Table.Tr key={key}>
-              <Table.Td><Anchor size="sm" component="a" href={`/language/${key}`}>{key}</Anchor></Table.Td>
+              <Table.Td><Anchor size="sm" component={Link} href={`/language/${key}`}>{key}</Anchor></Table.Td>
               <Table.Td>{config.languages[key].name}</Table.Td>
               <Table.Td>{config.languages[key].ownname}</Table.Td>
             </Table.Tr>
diff --git a/src/app/project/[project]/Listing.tsx b/src/app/project/[project]/Listing.tsx
index 87cbf08..9af6116 100644
--- a/src/app/project/[project]/Listing.tsx
+++ b/src/app/project/[project]/Listing.tsx
@@ -1,5 +1,6 @@
 'use client'
 import React from "react";
+import Link from 'next/link';
 import { Anchor, Box, Progress, Table, Tooltip } from "@mantine/core";
 import { ConfigContext } from "@/providers/ConfigProvider";
 import { LanguageStatistics, ProjectContext } from "@/providers/ProjectProvider";
@@ -55,7 +56,7 @@ export const Listing = () => {
         <Table.Tbody>
           {Object.keys(config.languages).map((key) => (
             <Table.Tr key={key}>
-              <Table.Td><Anchor size="sm" component="a" href={`/translation/${project.project}/${key}`}>{key}</Anchor></Table.Td>
+              <Table.Td><Anchor size="sm" component={Link} href={`/translation/${project.project}/${key}`}>{key}</Anchor></Table.Td>
               <Table.Td>{config.languages[key].name}</Table.Td>
               <Table.Td><Statistics statistics={project.statistics[key]} /></Table.Td>
             </Table.Tr>
diff --git a/src/app/projects/Listing.tsx b/src/app/projects/Listing.tsx
index 5d7c4fe..23ee7e1 100644
--- a/src/app/projects/Listing.tsx
+++ b/src/app/projects/Listing.tsx
@@ -1,5 +1,6 @@
 'use client'
 import React from "react";
+import Link from 'next/link';
 import { Anchor, Box, Table } from "@mantine/core";
 import { ConfigContext } from "@/providers/ConfigProvider";
 
@@ -17,7 +18,7 @@ export const Listing = () => {
         <Table.Tbody>
           {Object.keys(config.projects).map((key) => (
             <Table.Tr key={key}>
-              <Table.Td><Anchor size="sm" component="a" href={`/project/${key}`}>{config.projects[key].name}</Anchor></Table.Td>
+              <Table.Td><Anchor size="sm" component={Link} href={`/project/${key}`}>{config.projects[key].name}</Anchor></Table.Td>
             </Table.Tr>
           ))}
         </Table.Tbody>
diff --git a/src/app/translation/[project]/[language]/Listing.tsx b/src/app/translation/[project]/[language]/Listing.tsx
index 1338a21..a4b3cb4 100644
--- a/src/app/translation/[project]/[language]/Listing.tsx
+++ b/src/app/translation/[project]/[language]/Listing.tsx
@@ -1,14 +1,15 @@
 'use client'
 import clsx from "clsx";
 import React from "react";
+import Link from 'next/link';
 import { Anchor, Box, Group, LoadingOverlay, NavLink, Table, Text, rem } from "@mantine/core";
+import { IconListSearch } from "@tabler/icons-react";
 import { LanguageContext } from "@/providers/LanguageProvider";
-import { ValidatorContext } from "@/providers/ValidatorProvider";
 import { LayoutCommon } from "@/components/LayoutCommon";
+import { ProjectContext } from "@/providers/ProjectProvider";
 import { useIntersection } from "@mantine/hooks";
+import { ValidatorContext } from "@/providers/ValidatorProvider";
 import classes from './Listing.module.css';
-import { IconListSearch } from "@tabler/icons-react";
-import { ProjectContext } from "@/providers/ProjectProvider";
 
 const NavigationItem = ({ id, name, entries }: { id: string, name: string, entries: (IntersectionObserverEntry | null)[] }) => {
   /* Check if only the last entry is intersecting (and no other). */
@@ -50,7 +51,7 @@ const ListingItemRef = ({ items, id, name }: { items?: string[], id: string, nam
         {length !== 0 && <Table.Tbody>
           {items?.map((key) => (
             <Table.Tr key={key}>
-              <Table.Td><Anchor size="sm" component="a" href={`/string/${project.project}/${language.language}?id=${key}`}>{key}</Anchor></Table.Td>
+              <Table.Td><Anchor size="sm" component={Link} href={`/string/${project.project}/${language.language}?id=${key}`}>{key}</Anchor></Table.Td>
             </Table.Tr>
           ))}
         </Table.Tbody>}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ee20709..f1457fb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,6 @@
 'use client'
 import React from "react";
+import Link from "next/link";
 import { Breadcrumbs, Button, Menu } from "@mantine/core";
 import { IconChevronDown } from "@tabler/icons-react";
 import { usePathname } from "next/navigation";
@@ -18,22 +19,22 @@ export const Header = () => {
   return (
     <>
       <Breadcrumbs h="100%" px="md">
-        <Button component="a" variant="subtle" radius="xl" size="xs" href="/">Home</Button>
+        <Button component={Link} variant="subtle" radius="xl" size="xs" href="/">Home</Button>
 
         {pathname.startsWith("/languages") && (
-          <Button component="a" variant="subtle" radius="xl" size="xs" href="/languages">
+          <Button component={Link} variant="subtle" radius="xl" size="xs" href="/languages">
             Languages
           </Button>
         )}
 
         {pathname.startsWith("/projects") && (
-          <Button component="a" variant="subtle" radius="xl" size="xs" href="/projects">
+          <Button component={Link} variant="subtle" radius="xl" size="xs" href="/projects">
             Projects
           </Button>
         )}
 
         {pathname.startsWith("/language/") && (
-          <Button component="a" variant="subtle" radius="xl" size="xs" href={`/language/${language.language}`}>
+          <Button component={Link} variant="subtle" radius="xl" size="xs" href={`/language/${language.language}`}>
             All Projects
           </Button>
         )}
@@ -46,11 +47,11 @@ export const Header = () => {
               </Button>
             </Menu.Target>
             <Menu.Dropdown>
-              <Menu.Item component="a" href={`/languages`}>
+              <Menu.Item component={Link} href={`/languages`}>
                 All languages
               </Menu.Item>
               {Object.keys(config.languages ?? {}).map((key) => (
-                <Menu.Item key={key} component="a" href={`/language/${key}`}>
+                <Menu.Item key={key} component={Link} href={`/language/${key}`}>
                   {config.languages?.[key]?.name ?? ""} ({key})
                 </Menu.Item>
               ))}
@@ -66,11 +67,11 @@ export const Header = () => {
               </Button>
             </Menu.Target>
             <Menu.Dropdown>
-              <Menu.Item component="a" href={`/projects`}>
+              <Menu.Item component={Link} href={`/projects`}>
                 All projects
               </Menu.Item>
               {Object.keys(config.projects ?? {}).map((key) => (
-                <Menu.Item key={key} component="a" href={`/project/${key}`}>
+                <Menu.Item key={key} component={Link} href={`/project/${key}`}>
                   {config.projects?.[key]?.name ?? ""}
                 </Menu.Item>
               ))}
@@ -79,7 +80,7 @@ export const Header = () => {
         )}
 
         {pathname.startsWith("/project/") && (
-          <Button component="a" variant="subtle" radius="xl" size="xs" href={`/project/${project.project}`}>
+          <Button component={Link} variant="subtle" radius="xl" size="xs" href={`/project/${project.project}`}>
             All languages
           </Button>
         )}
@@ -92,11 +93,11 @@ export const Header = () => {
               </Button>
             </Menu.Target>
             <Menu.Dropdown>
-              <Menu.Item component="a" href={`/language/${language.language}`}>
+              <Menu.Item component={Link} href={`/language/${language.language}`}>
                 All projects
               </Menu.Item>
               {Object.keys(config.projects ?? {}).map((key) => (
-                <Menu.Item key={key} component="a" href={`/translation/${key}/${language.language}`}>
+                <Menu.Item key={key} component={Link} href={`/translation/${key}/${language.language}`}>
                   {config.projects?.[key]?.name ?? ""}
                 </Menu.Item>
               ))}
@@ -112,11 +113,11 @@ export const Header = () => {
               </Button>
             </Menu.Target>
             <Menu.Dropdown>
-              <Menu.Item component="a" href={`/project/${project.project}`}>
+              <Menu.Item component={Link} href={`/project/${project.project}`}>
                 All languages
               </Menu.Item>
               {Object.keys(config.languages ?? {}).map((key) => (
-                <Menu.Item key={key} component="a" href={`/translation/${project.project}/${key}`}>
+                <Menu.Item key={key} component={Link} href={`/translation/${project.project}/${key}`}>
                   {config.languages?.[key]?.name ?? ""} ({key})
                 </Menu.Item>
               ))}
@@ -125,7 +126,7 @@ export const Header = () => {
         )}
 
         {pathname.startsWith("/string/") && (
-          <Button component="a" variant="subtle" radius="xl" size="xs" href={`/translation/${project.project}/${language.language}`}>
+          <Button component={Link} variant="subtle" radius="xl" size="xs" href={`/translation/${project.project}/${language.language}`}>
             Strings
           </Button>
         )}