website refactor

apps/website/components/teams/TeamsDirectory.tsx

@@ -1,46 +1,37 @@
 'use client';
 
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
-import { Group } from '@/ui/Group';
-import { Text } from '@/ui/Text';
-import { StatusDot } from '@/ui/StatusDot';
+import { Heading } from '@/ui/Heading';
 
 interface TeamsDirectoryProps {
   children: ReactNode;
-  title?: string;
-  subtitle?: string;
 }
 
-export function TeamsDirectory({ children, title, subtitle }: TeamsDirectoryProps) {
+export function TeamsDirectory({ children }: TeamsDirectoryProps) {
   return (
-    <Container size="lg" py={12}>
-      <Group direction="column" gap={10} fullWidth>
-        {title && (
-          <Group direction="row" align="center" gap={2}>
-            <StatusDot intent="primary" size="md" />
-            <Text size="xs" weight="bold" variant="low" uppercase>{title}</Text>
-          </Group>
-        )}
+    <Box paddingY={12} bg="var(--ui-color-bg-base)" minHeight="100vh">
+      <Container size="xl">
         {children}
-      </Group>
-    </Container>
+      </Container>
+    </Box>
   );
 }
 
-export function TeamsDirectorySection({ children, title, accentColor = "primary-accent" }: { children: ReactNode, title: string, accentColor?: string }) {
-  const intentMap: Record<string, 'primary' | 'success' | 'warning' | 'critical' | 'telemetry'> = {
-    'primary-accent': 'primary',
-    'telemetry-aqua': 'telemetry',
-  };
+interface TeamsDirectorySectionProps {
+  title: string;
+  children: ReactNode;
+  accentColor?: string;
+}
 
+export function TeamsDirectorySection({ title, children }: TeamsDirectorySectionProps) {
   return (
-    <Group direction="column" gap={6} fullWidth>
-      <Group direction="row" align="center" gap={2}>
-        <StatusDot intent={intentMap[accentColor] || 'primary'} size="md" />
-        <Text size="xs" weight="bold" variant="low" uppercase>{title}</Text>
-      </Group>
+    <Box marginBottom={16}>
+      <Box marginBottom={8} borderBottom="1px solid var(--ui-color-border-muted)" paddingBottom={4}>
+        <Heading level={2} weight="bold" uppercase>{title}</Heading>
+      </Box>
       {children}
-    </Group>
+    </Box>
   );
 }