44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
interface TeamsHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
action?: ReactNode;
|
|
}
|
|
|
|
export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
|
|
return (
|
|
<Box
|
|
marginBottom={12}
|
|
display="flex"
|
|
flexDirection={{ base: 'col', md: 'row' }}
|
|
alignItems={{ md: 'end' }}
|
|
justifyContent="space-between"
|
|
gap={6}
|
|
borderBottom="1px solid var(--ui-color-border-muted)"
|
|
paddingBottom={8}
|
|
>
|
|
<Box>
|
|
<Box display="flex" alignItems="center" gap={3} marginBottom={2}>
|
|
<Box width={1} height={8} backgroundColor="var(--ui-color-intent-primary)" />
|
|
<Heading level={1} weight="bold" uppercase>{title}</Heading>
|
|
</Box>
|
|
{subtitle && (
|
|
<Text variant="low" size="lg" uppercase mono letterSpacing="0.2em">
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{action && (
|
|
<Box display="flex" alignItems="center">
|
|
{action}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|