35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { Heading } from '@astryxdesign/core/Heading';
|
|
import { Text } from '@astryxdesign/core/Text';
|
|
import { HStack } from '@astryxdesign/core/HStack';
|
|
|
|
export interface SectionHeaderProps {
|
|
title: string;
|
|
/**
|
|
* Sits inline beside the title, not beneath it.
|
|
*
|
|
* Required rather than optional on purpose: a bare heading tells the reader
|
|
* what a block is called but not what it is showing them, and every section
|
|
* in this console has something worth saying there.
|
|
*/
|
|
note: string;
|
|
/** A control or a "View all" link, right-aligned. */
|
|
action?: ReactNode;
|
|
}
|
|
|
|
export function SectionHeader({ title, note, action }: SectionHeaderProps) {
|
|
return (
|
|
<HStack justify="between" align="center" gap={2} wrap="wrap">
|
|
<HStack align="center" gap={1.5} wrap="wrap">
|
|
<Heading level={2}>
|
|
{title}
|
|
</Heading>
|
|
<Text type="body" color="secondary">
|
|
{note}
|
|
</Text>
|
|
</HStack>
|
|
{action}
|
|
</HStack>
|
|
);
|
|
}
|