fix: clean up Anchors

src/components/AnchorNext.tsx

@@ -0,0 +1,6 @@
+import { Anchor } from '@mantine/core';
+import Link from 'next/link';
+
+export default function AnchorNext({ href, ...others }) {
+  return <Anchor component={Link} href={href} {...others} />;
+}

src/components/Layout.tsx

@@ -264,42 +264,42 @@ export default function Layout({ children, props }) {
                     {children
                       .filter((x) => (x.if ? x.if(user, props) : true))
                       .map(({ icon, text, link }) => (
-                        <Link href={link} key={text} passHref legacyBehavior>
                         <NavLink
-                            component='a'
+                          key={text}
                           label={text}
                           icon={icon}
                           active={router.pathname === link}
                           variant='light'
+                          component={Link}
+                          href={link}
                         />
-                        </Link>
                       ))}
                   </NavLink>
                 ) : (
-                  <Link href={link} key={text} passHref legacyBehavior>
                   <NavLink
-                      component='a'
+                    key={text}
                     label={text}
                     icon={icon}
                     active={router.pathname === link}
                     variant='light'
+                    component={Link}
+                    href={link}
                   />
-                  </Link>
                 )
               )}
           </Navbar.Section>
           <Navbar.Section>
             {external_links.length
               ? external_links.map(({ label, link }, i) => (
-                  <Link href={link} passHref key={i} legacyBehavior>
                   <NavLink
+                    key={label}
                     label={label}
-                      component='a'
                     target='_blank'
                     variant='light'
                     icon={<IconExternalLink size={18} />}
+                    component={Link}
+                    href={link}
                   />
-                  </Link>
                 ))
               : null}
           </Navbar.Section>

src/components/Link.tsx

@@ -1,6 +0,0 @@
-import { Anchor } from '@mantine/core';
-import * as NextLink from 'next/link';
-
-export default function Link(props) {
-  return <Anchor component={NextLink} legacyBehavior {...props} />;
-}

src/components/pages/Files/index.tsx

@@ -23,11 +23,9 @@ export default function Files({ disableMediaPreview, exifEnabled, queryPage, com
     <>
       <Group mb='md'>
         <Title>Files</Title>
-        <Link href='/dashboard/upload/file' passHref legacyBehavior>
+        <ActionIcon component={Link} href='/dashboard/upload/file' variant='filled' color='primary'>
-          <ActionIcon component='a' variant='filled' color='primary'>
           <IconFileUpload size='1rem' />
         </ActionIcon>
-        </Link>
       </Group>
       {favoritePages.isSuccess && favoritePages.data.length ? (
         <Accordion

src/components/pages/Folders/index.tsx

@@ -1,4 +1,15 @@
-import { ActionIcon, Avatar, Card, Group, SimpleGrid, Skeleton, Stack, Title, Tooltip } from '@mantine/core';
+import {
+  ActionIcon,
+  Anchor,
+  Avatar,
+  Card,
+  Group,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { useModals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
@@ -16,13 +27,14 @@ import {
   IconLockAccessOff,
   IconLockOpen,
 } from '@tabler/icons-react';
-import Link from 'components/Link';
+import AnchorNext from 'components/AnchorNext';
 import MutedText from 'components/MutedText';
 import useFetch from 'hooks/useFetch';
 import { useFolders } from 'lib/queries/folders';
 import { listViewFoldersSelector } from 'lib/recoil/settings';
 import { relativeTime } from 'lib/utils/client';
 import { DataTable, DataTableSortStatus } from 'mantine-datatable';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
@@ -366,7 +378,8 @@ export default function Folders({ disableMediaPreview, exifEnabled, compress })
                                   title: 'Copied folder link',
                                   message: (
                                     <>
-                                      Copied <Link href={`/folder/${folder.id}`}>folder link</Link> to
+                                      Copied{' '}
+                                      <AnchorNext href={`/folder/${folder.id}`}>folder link</AnchorNext> to
                                       clipboard
                                     </>
                                   ),

src/components/pages/Manage/Flameshot.tsx

@@ -1,5 +1,6 @@
-import { Code } from '@mantine/core';
+import { Anchor, Code } from '@mantine/core';
-import Link from 'components/Link';
+import AnchorNext from 'components/AnchorNext';
+import Link from 'next/link';
 import { GeneratorModal } from './GeneratorModal';
 
 export default function Flameshot({ user, open, setOpen }) {
@@ -105,18 +106,18 @@ ${curl.join(' ')} -d "{\\"url\\": \\"$arg\\"}"${values.noJSON ? '' : " | jq -r '
       title='Flameshot'
       desc={
         <>
-          To use this script, you need <Link href='https://flameshot.org'>Flameshot</Link>,{' '}
+          To use this script, you need <AnchorNext href='https://flameshot.org'>Flameshot</AnchorNext>,{' '}
-          <Link href='https://curl.se/'>
+          <AnchorNext href='https://curl.se/'>
             <Code>curl</Code>
-          </Link>
+          </AnchorNext>
           ,{' '}
-          <Link href='https://github.com/stedolan/jq'>
+          <AnchorNext href='https://github.com/stedolan/jq'>
             <Code>jq</Code>
-          </Link>
+          </AnchorNext>
           , and{' '}
-          <Link href='https://github.com/kfish/xsel'>
+          <AnchorNext href='https://github.com/kfish/xsel'>
             <Code>xsel</Code>
-          </Link>{' '}
+          </AnchorNext>{' '}
           installed. This script is intended for use on Linux only.
         </>
       }

src/components/pages/Manage/GeneratorModal.tsx

@@ -1,4 +1,5 @@
 import {
+  Anchor,
   Box,
   Button,
   Checkbox,
@@ -15,8 +16,9 @@ import {
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { IconFileDownload, IconWorld } from '@tabler/icons-react';
-import Link from 'components/Link';
+import AnchorNext from 'components/AnchorNext';
 import MutedText from 'components/MutedText';
+import Link from 'next/link';
 import { useReducer, useState } from 'react';
 
 const DEFAULT_OD_DESC = 'Override the default domain(s). Type in a URL, e.g https://example.com';
@@ -169,9 +171,9 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
               <Text>Wayland</Text>
               <MutedText size='sm'>
                 If using wayland, you can check the boxes below to your liking. This will require{' '}
-                <Link href='https://github.com/bugaevc/wl-clipboard'>
+                <AnchorNext href='https://github.com/bugaevc/wl-clipboard'>
                   <Code>wl-clipboard</Code>
-                </Link>{' '}
+                </AnchorNext>{' '}
                 for the <Code>wl-copy</Code> command.
               </MutedText>
             </Box>
@@ -197,8 +199,8 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
                 description={
                   <>
                     If using a compositor such as{' '}
-                    <Link href='https://github.com/hyprwm/hyprland'>Hyprland</Link>, this option will set the{' '}
+                    <AnchorNext href='https://github.com/hyprwm/hyprland'>Hyprland</AnchorNext>, this option
-                    <Code>XDG_CURRENT_DESKTOP=sway</Code> to workaround Flameshot&apos;s errors
+                    will set the <Code>XDG_CURRENT_DESKTOP=sway</Code> to workaround Flameshot&apos;s errors
                   </>
                 }
                 disabled={!isUploadFile}

src/components/pages/Manage/index.tsx

@@ -35,14 +35,15 @@ import {
   IconUserMinus,
   IconUserX,
 } from '@tabler/icons-react';
+import AnchorNext from 'components/AnchorNext';
 import { DiscordIcon, FlameshotIcon, GitHubIcon, GoogleIcon, ShareXIcon } from 'components/icons';
-import Link from 'components/Link';
 import MutedText from 'components/MutedText';
 import { SmallTable } from 'components/SmallTable';
 import useFetch from 'hooks/useFetch';
 import { userSelector } from 'lib/recoil/user';
 import { bytesToHuman } from 'lib/utils/bytes';
 import { capitalize } from 'lib/utils/client';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import ClearStorage from './ClearStorage';
@@ -355,7 +356,8 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
       <Title>Manage User</Title>
       <MutedText size='md'>
         Want to use variables in embed text? Visit{' '}
-        <Link href='https://zipline.diced.tech/docs/guides/variables'>the docs</Link> for variables
+        <AnchorNext href='https://zipline.diced.tech/docs/guides/variables'>the docs</AnchorNext> for
+        variables
       </MutedText>
       <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
         <TextInput id='username' label='Username' my='sm' {...form.getInputProps('username')} />
@@ -459,11 +461,16 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
                   !user.oauth?.map(({ provider }) => provider.toLowerCase()).includes(x.name.toLowerCase())
               )
               .map(({ link_url, name, Icon }, i) => (
-                <Link key={i} href={link_url} passHref legacyBehavior>
+                <Button
-                  <Button size='lg' leftIcon={<Icon colorScheme='manage' />} component='a' my='sm'>
+                  key={i}
+                  size='lg'
+                  leftIcon={<Icon colorScheme='manage' />}
+                  component={Link}
+                  href={link_url}
+                  my='sm'
+                >
                   Link account with {name}
                 </Button>
-                </Link>
               ))}
 
             {user?.oauth?.map(({ provider }, i) => (

src/components/pages/Upload/showFilesModal.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Group, Stack, Table, Title, Tooltip } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IconClipboardCopy, IconExternalLink } from '@tabler/icons-react';
-import Link from 'components/Link';
+import AnchorNext from 'components/AnchorNext';
 
 export default function showFilesModal(clipboard, modals, files: string[]) {
   const open = (idx: number) => window.open(files[idx], '_blank');
@@ -16,7 +16,7 @@ export default function showFilesModal(clipboard, modals, files: string[]) {
     else
       showNotification({
         title: 'Copied to clipboard',
-        message: <Link href={files[idx]}>{files[idx]}</Link>,
+        message: <AnchorNext href={files[idx]}>{files[idx]}</AnchorNext>,
         icon: <IconClipboardCopy size='1rem' />,
       });
   };
@@ -30,7 +30,7 @@ export default function showFilesModal(clipboard, modals, files: string[]) {
           {files.map((file, idx) => (
             <Group key={idx} position='apart'>
               <Group position='left'>
-                <Link href={file}>{file}</Link>
+                <AnchorNext href={file}>{file}</AnchorNext>
               </Group>
               <Group position='right'>
                 <Tooltip label='Open link in a new tab'>

src/components/pages/Urls/URLCard.tsx

@@ -1,11 +1,9 @@
-import { ActionIcon, Card, Group, LoadingOverlay, Stack, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Anchor, Card, Group, Stack, Title, Tooltip } from '@mantine/core';
-import { useClipboard } from '@mantine/hooks';
+import { IconClipboardCopy, IconExternalLink, IconTrash } from '@tabler/icons-react';
-import { showNotification } from '@mantine/notifications';
-import { IconClipboardCopy, IconExternalLink, IconLink, IconLinkOff, IconTrash } from '@tabler/icons-react';
-import Link from 'components/Link';
 import MutedText from 'components/MutedText';
-import { URLResponse, useURLDelete } from 'lib/queries/url';
+import { URLResponse } from 'lib/queries/url';
 import { relativeTime } from 'lib/utils/client';
+import Link from 'next/link';
 
 export default function URLCard({
   url,
@@ -37,7 +35,7 @@ export default function URLCard({
             )}
             <MutedText size='sm'>Views: {url.views}</MutedText>
             <MutedText size='sm'>
-              URL: <Link href={url.destination}>{url.destination}</Link>
+              URL: <AnchorNext href={url.destination}>{url.destination}</AnchorNext>
             </MutedText>
           </Stack>
         </Group>

src/components/pages/Urls/index.tsx

@@ -9,10 +9,10 @@ import {
   NumberInput,
   SimpleGrid,
   Skeleton,
+  Text,
   TextInput,
   Title,
   Tooltip,
-  Text,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useClipboard } from '@mantine/hooks';
@@ -26,12 +26,13 @@ import {
   IconLinkOff,
   IconList,
 } from '@tabler/icons-react';
-import Link from 'components/Link';
+import AnchorNext from 'components/AnchorNext';
 import MutedText from 'components/MutedText';
 import { useURLDelete, useURLs } from 'lib/queries/url';
 import { listViewUrlsSelector } from 'lib/recoil/settings';
 import { userSelector } from 'lib/recoil/user';
 import { DataTable, DataTableSortStatus } from 'mantine-datatable';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import URLCard from './URLCard';
@@ -85,7 +86,7 @@ export default function Urls() {
     clipboard.copy(url);
     showNotification({
       title: 'Copied to clipboard',
-      message: <Link href={url}>{url}</Link>,
+      message: <AnchorNext href={url}>{url}</AnchorNext>,
       color: 'green',
       icon: <IconClipboardCopy size='1rem' />,
     });
@@ -141,7 +142,7 @@ export default function Urls() {
         children: (
           <Group position='apart'>
             <Group position='left'>
-              <Link href={json.url}>{data.vanity ?? json.url}</Link>
+              <AnchorNext href={json.url}>{data.vanity ?? json.url}</AnchorNext>
             </Group>
             <Group position='right'>
               <Tooltip label='Open link in a new tab'>
@@ -268,9 +269,9 @@ export default function Urls() {
               title: 'URL',
               sortable: true,
               render: (url) => (
-                <Anchor component={Link} href={url.url} target='_blank'>
+                <AnchorNext href={url.url} target='_blank'>
                   {url.destination}
-                </Anchor>
+                </AnchorNext>
               ),
             },
             {

src/pages/404.tsx

@@ -1,7 +1,7 @@
 import { Button, Stack, Title } from '@mantine/core';
-import Link from 'components/Link';
 import MutedText from 'components/MutedText';
 import Head from 'next/head';
+import Link from 'next/link';
 
 export default function FourOhFour() {
   return (

src/pages/500.tsx

@@ -1,7 +1,7 @@
 import { Button, Stack, Title, Tooltip } from '@mantine/core';
-import Link from 'components/Link';
 import MutedText from 'components/MutedText';
 import Head from 'next/head';
+import Link from 'next/link';
 
 export default function FiveHundred() {
   return (

src/pages/_error.tsx

@@ -1,7 +1,7 @@
 import { Button, Stack, Title } from '@mantine/core';
-import Link from 'components/Link';
 import MutedText from 'components/MutedText';
 import Head from 'next/head';
+import Link from 'next/link';
 
 export default function Error({ statusCode, oauthError }) {
   return (

src/pages/auth/login.tsx

@@ -21,6 +21,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 export { getServerSideProps } from 'middleware/getServerSideProps';
+import AnchorNext from 'components/AnchorNext';
 
 export default function Login({ title, user_registration, oauth_registration, oauth_providers: unparsed }) {
   const router = useRouter();
@@ -159,19 +160,19 @@ export default function Login({ title, user_registration, oauth_registration, oa
             <>
               <Group grow>
                 {oauth_providers.map(({ url, name, Icon }, i) => (
-                  <Link key={i} href={url} passHref legacyBehavior>
                   <Button
+                    key={i}
                     size='sm'
                     variant='outline'
                     radius='md'
                     fullWidth
                     leftIcon={<Icon height={'15'} width={'15'} colorScheme='dark' />}
-                      component='a'
                     my='xs'
+                    component={Link}
+                    href={url}
                   >
                     {name}
                   </Button>
-                  </Link>
                 ))}
               </Group>
 

src/pages/oauth_error.tsx

@@ -1,8 +1,8 @@
 import { Button, Stack, Title } from '@mantine/core';
-import Link from 'components/Link';
 import MutedText from 'components/MutedText';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 

src/pages/view/[id].tsx

@@ -1,13 +1,14 @@
 import { Box, Button, Modal, PasswordInput } from '@mantine/core';
 import type { File } from '@prisma/client';
+import AnchorNext from 'components/AnchorNext';
 import config from 'lib/config';
-import Link from 'components/Link';
 import exts from 'lib/exts';
 import prisma from 'lib/prisma';
 import { parseString } from 'lib/utils/parser';
 import type { UserExtended } from 'middleware/withZipline';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
@@ -190,7 +191,9 @@ export default function EmbeddedFile({
         {!file.mimetype.startsWith('video') &&
           !file.mimetype.startsWith('image') &&
           !file.mimetype.startsWith('audio') && (
-            <Link href={dataURL('/r')}>Can&#39;t preview this file. Click here to download it.</Link>
+            <AnchorNext component={Link} href={dataURL('/r')}>
+              Can&#39;t preview this file. Click here to download it.
+            </AnchorNext>
           )}
       </Box>
     </>