website refactor

apps/website/components/teams/TeamsDirectory.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface TeamsDirectoryProps {
+  children: ReactNode;
+  title?: string;
+  subtitle?: string;
+}
+
+export function TeamsDirectory({ children, title, subtitle }: TeamsDirectoryProps) {
+  return (
+    <Box as="main" bg="base-black" minHeight="screen">
+      <Container size="lg">
+        <Box paddingY={12}>
+          <Stack gap={10}>
+            {title && (
+              <Stack direction="row" align="center" gap={2} mb={6}>
+                <Box w="2" h="2" bg="primary-accent" />
+                <Text size="xs" weight="bold" color="text-gray-400" uppercase>{title}</Text>
+              </Stack>
+            )}
+            {children}
+          </Stack>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export function TeamsDirectorySection({ children, title, accentColor = "primary-accent" }: { children: ReactNode, title: string, accentColor?: string }) {
+  return (
+    <Box>
+      <Stack direction="row" align="center" gap={2} mb={6}>
+        <Box w="2" h="2" bg={accentColor} />
+        <Text size="xs" weight="bold" color="text-gray-400" uppercase>{title}</Text>
+      </Stack>
+      {children}
+    </Box>
+  );
+}