website refactor

apps/website/components/errors/NotFoundHelpLinks.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { NavGroup } from '@/ui/NavGroup';
 import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
 import React from 'react';
 
 interface NotFoundHelpLinksProps {
@@ -16,31 +17,20 @@ interface NotFoundHelpLinksProps {
  */
 export function NotFoundHelpLinks({ links }: NotFoundHelpLinksProps) {
   return (
-    <Stack direction="row" gap={6} align="center" wrap center>
-      {links.map((link, index) => (
-        <React.Fragment key={link.href}>
-          <Stack 
-            as="a" 
-            href={link.href}
-            transition
-            display="inline-block"
+    <NavGroup direction="horizontal" gap={6} align="center">
+      {links.map((link) => (
+        <Link key={link.href} href={link.href} variant="ghost" underline="none">
+          <Text
+            variant="low"
+            hoverVariant="primary"
+            weight="medium"
+            size="xs"
+            uppercase
           >
-            <Text
-              color="text-gray-400"
-              hoverTextColor="primary-accent"
-              weight="medium"
-              size="xs"
-              letterSpacing="widest"
-              uppercase
-            >
-              {link.label}
-            </Text>
-          </Stack>
-          {index < links.length - 1 && (
-            <Stack width="1px" height="12px" bg="border-gray" opacity={0.5} />
-          )}
-        </React.Fragment>
+            {link.label}
+          </Text>
+        </Link>
       ))}
-    </Stack>
+    </NavGroup>
   );
 }