website refactor

apps/website/ui/BreadcrumbBar.tsx

@@ -1,17 +1,30 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';
 
-interface BreadcrumbBarProps {
-  children: React.ReactNode;
-  className?: string;
+export interface BreadcrumbBarProps {
+  items: BreadcrumbItem[];
+  actions?: ReactNode;
 }
 
-/**
- * BreadcrumbBar is a container for breadcrumbs, typically placed at the top of the ContentShell.
- */
-export function BreadcrumbBar({ children, className = '' }: BreadcrumbBarProps) {
+export const BreadcrumbBar = ({ 
+  items, 
+  actions 
+}: BreadcrumbBarProps) => {
   return (
-    <div className={`mb-6 flex items-center space-x-2 text-sm ${className}`}>
-      {children}
-    </div>
+    <Box 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="between" 
+      paddingY={4} 
+      borderBottom
+    >
+      <Breadcrumbs items={items} />
+      {actions && (
+        <Box display="flex" alignItems="center" gap={4}>
+          {actions}
+        </Box>
+      )}
+    </Box>
   );
-}
+};