wip

apps/website/components/layout/Breadcrumbs.tsx

@@ -1,6 +1,8 @@
-'use client';
-
-import Link from 'next/link';
+import React from 'react';
+import { Link } from '@/ui/Link';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 
 export type BreadcrumbItem = {
   label: string;
@@ -12,7 +14,7 @@ interface BreadcrumbsProps {
   className?: string;
 }
 
-export default function Breadcrumbs({ items, className }: BreadcrumbsProps) {
+export function Breadcrumbs({ items }: BreadcrumbsProps) {
   if (!items || items.length === 0) {
     return null;
   }
@@ -20,34 +22,31 @@ export default function Breadcrumbs({ items, className }: BreadcrumbsProps) {
   const lastIndex = items.length - 1;
 
   return (
-    <nav
-      aria-label="Breadcrumb"
-      className={className ?? 'text-sm text-gray-400 mb-4'}
-    >
-      <ol className="flex items-center gap-2 flex-wrap">
+    <Box as="nav" aria-label="Breadcrumb" mb={4}>
+      <Stack direction="row" align="center" gap={2} wrap>
         {items.map((item, index) => {
           const isLast = index === lastIndex;
           const content = item.href && !isLast ? (
             <Link
               href={item.href}
-              className="hover:text-primary-blue transition-colors"
+              variant="ghost"
             >
               {item.label}
             </Link>
           ) : (
-            <span className={isLast ? 'text-white' : ''}>{item.label}</span>
+            <Text color={isLast ? 'text-white' : 'text-gray-400'}>{item.label}</Text>
           );
 
           return (
-            <li key={`${item.label}-${index}`} className="flex items-center gap-2">
+            <Stack key={`${item.label}-${index}`} direction="row" align="center" gap={2}>
               {index > 0 && (
-                <span className="text-gray-600">/</span>
+                <Text color="text-gray-600">/</Text>
               )}
               {content}
-            </li>
+            </Stack>
           );
         })}
-      </ol>
-    </nav>
+      </Stack>
+    </Box>
   );
 }