43 lines
1.1 KiB
TypeScript
43 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}
|
|
className="border-b border-[var(--ui-color-border-muted)] pb-8"
|
|
>
|
|
<Box className="space-y-2">
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box width={1} height={8} className="bg-[var(--ui-color-intent-primary)]" />
|
|
<Heading level={1} weight="bold" uppercase>{title}</Heading>
|
|
</Box>
|
|
{subtitle && (
|
|
<Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{action && (
|
|
<Box display="flex" alignItems="center">
|
|
{action}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|