34 lines
980 B
TypeScript
34 lines
980 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Heading } from './Heading';
|
|
import { Text } from './Text';
|
|
|
|
interface TeamsHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
action?: ReactNode;
|
|
}
|
|
|
|
export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
|
|
return (
|
|
<div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
|
|
<Heading level={1} weight="bold" uppercase>{title}</Heading>
|
|
</div>
|
|
{subtitle && (
|
|
<Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
</div>
|
|
|
|
{action && (
|
|
<div className="flex items-center">
|
|
{action}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|