website refactor

apps/website/ui/Breadcrumbs.tsx

@@ -1,50 +1,39 @@
-import { Link } from '@/ui/Link';
-import { Box } from '@/ui/primitives/Box';
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
+import React from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { ChevronRight } from 'lucide-react';
+import { Icon } from './Icon';
+import { Link } from './Link';
 
-export type BreadcrumbItem = {
+export interface BreadcrumbItem {
   label: string;
   href?: string;
-};
+}
 
-interface BreadcrumbsProps {
+export interface BreadcrumbsProps {
   items: BreadcrumbItem[];
 }
 
-export function Breadcrumbs({ items }: BreadcrumbsProps) {
-  if (!items || items.length === 0) {
-    return null;
-  }
-
-  const lastIndex = items.length - 1;
-
+export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
   return (
-    <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}
-              variant="ghost"
-            >
-              {item.label}
-            </Link>
-          ) : (
-            <Text color={isLast ? 'text-white' : 'text-gray-400'}>{item.label}</Text>
-          );
-
-          return (
-            <Stack key={`${item.label}-${index}`} direction="row" align="center" gap={2}>
-              {index > 0 && (
-                <Text color="text-gray-600">/</Text>
-              )}
-              {content}
-            </Stack>
-          );
-        })}
-      </Stack>
+    <Box display="flex" alignItems="center" gap={2}>
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        return (
+          <React.Fragment key={index}>
+            {index > 0 && <Icon icon={ChevronRight} size={3} intent="low" />}
+            {isLast || !item.href ? (
+              <Text size="sm" variant={isLast ? 'high' : 'low'} weight={isLast ? 'bold' : 'normal'}>
+                {item.label}
+              </Text>
+            ) : (
+              <Link href={item.href} variant="secondary">
+                <Text size="sm">{item.label}</Text>
+              </Link>
+            )}
+          </React.Fragment>
+        );
+      })}
     </Box>
   );
-}
+};