47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode } from 'react';
|
|
import { Container } from '@/ui/Container';
|
|
import { Group } from '@/ui/Group';
|
|
import { Text } from '@/ui/Text';
|
|
import { StatusDot } from '@/ui/StatusDot';
|
|
|
|
interface TeamsDirectoryProps {
|
|
children: ReactNode;
|
|
title?: string;
|
|
subtitle?: string;
|
|
}
|
|
|
|
export function TeamsDirectory({ children, title, subtitle }: 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>
|
|
)}
|
|
{children}
|
|
</Group>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
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',
|
|
};
|
|
|
|
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>
|
|
{children}
|
|
</Group>
|
|
);
|
|
}
|