Page Header

'use client';
 
import { Column, Row, Text } from '@umami/react-zen';
 
export function PageHeader({ children, ...props }) {
  return (
    <Row
      width="100%"
      paddingY="4"
      alignItems="center"
      justifyContent="space-between"
      borderColor="muted"
      border="bottom"
      gap="4"
      {...props}
    >
      {children}
    </Row>
  );
}
 
export function PageHeaderTitle({ title, description, breadcrumb }) {
  return (
    <Column gap="1">
      {breadcrumb}
      <Text size="xl" weight="semibold">
        {title}
      </Text>
      {description && (
        <Text color="muted">
          {description}
        </Text>
      )}
    </Column>
  );
}
 
export function PageHeaderActions({ children }) {
  return (
    <Row gap="2" alignItems="center">
      {children}
    </Row>
  );
}