49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
action?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Generic PageHeader component following the Teams page style.
|
|
* Used to maintain visual consistency across main directory pages.
|
|
*/
|
|
export function PageHeader({ title, subtitle, action }: PageHeaderProps) {
|
|
return (
|
|
<Box
|
|
marginBottom={12}
|
|
display="flex"
|
|
flexDirection={{ base: 'col', md: 'row' }}
|
|
alignItems={{ base: 'start', md: 'end' }}
|
|
justifyContent="between"
|
|
gap={6}
|
|
borderBottom
|
|
borderColor="var(--ui-color-border-muted)"
|
|
paddingBottom={8}
|
|
>
|
|
<Box display="flex" flexDirection="col" gap={2}>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box width="4px" height="32px" bg="var(--ui-color-intent-primary)" />
|
|
<Heading level={1} weight="bold" uppercase>{title}</Heading>
|
|
</Box>
|
|
{subtitle && (
|
|
<Text variant="low" size="lg" uppercase weight="bold" letterSpacing="widest">
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{action && (
|
|
<Box display="flex" alignItems="center">
|
|
{action}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|