refactor: docs design (#8487)

packages/website/src/components/HyperlinkedText.tsx

@@ -1,10 +1,7 @@
+import { Anchor, Text } from '@mantine/core';
 import Link from 'next/link';
 import type { TokenDocumentation } from '~/util/parse.server';
 
-export interface HyperlinkedTextProps {
-	tokens: TokenDocumentation[];
-}
-
 /**
  * Constructs a hyperlinked html node based on token type references
  *
@@ -12,22 +9,24 @@ export interface HyperlinkedTextProps {
  *
  * @returns An array of JSX elements and string comprising the hyperlinked text
  */
-export function HyperlinkedText({ tokens }: HyperlinkedTextProps) {
+export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
 	return (
 		<>
-			{tokens.map((token) => {
+			{tokens.map((token, idx) => {
 				if (token.path) {
 					return (
-						<Link key={token.text} href={token.path}>
-							<a className="text-blue-500 dark:text-blue-300 no-underline">{token.text}</a>
+						<Link key={idx} href={token.path} passHref>
+							<Anchor component="a" inherit>
+								{token.text}
+							</Anchor>
 						</Link>
 					);
 				}
 
 				return (
-					<span key={token.text} className="text-blue-500 dark:text-blue-300">
+					<Text key={idx} span unstyled>
 						{token.text}
-					</span>
+					</Text>
 				);
 			})}
 		</>