46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
'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>
|
|
);
|
|
}
|