fix: use next/link instead of "a" for Anchor (#1)

OpenTTD · Apr 28, 2024 · 78b28a0 · 78b28a0
1 parent e9d88f8
commit 78b28a0
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
         )}