Initial commit

src/components/SectionHeader.tsx

@@ -0,0 +1,34 @@
+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>
+  );
+}