# Page Header

The title row of a page: breadcrumbs, title, status, actions and optional page tabs.

Source page: https://sproutboat.com/ikada/components/page-header

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/page-header.json
```
Or from the package: `import { PageHeader, PageTabs, PageTab } from "@sproutboat/ikada";`
## Usage
```tsx
import { PageHeader, PageTabs, PageTab } from "@/components/ikada/page-header";

<PageHeader
  title="heron"
  status={<StatusDot tone="success" live label="Live" />}
  description="heron.sproutboat.app"
  actions={<Button variant="primary">Deploy</Button>}
/>
```
## Examples
### Title and actions
The title is the page's only h1. Actions sit on the right and wrap under it on narrow screens.
```tsx
<PageHeader
        headingLevel="h3"
  title="robin"
  description="robin.sproutboat.app"
  actions={
    <>
      <Button>Visit</Button>
      <Button variant="primary">Deploy</Button>
    </>
  }
/>
```
### Breadcrumbs and status

```tsx
<PageHeader
        headingLevel="h3"
  breadcrumbs={
    <Breadcrumbs
      items={[
        { label: "Sproutboat", href: "/" },
        { label: "wren", href: "/sprouts/wren" },
        { label: "Overview" },
      ]}
    />
  }
  title="wren"
  status={<StatusDot tone="success" live label="Live" />}
  description="eu-west · main · 3 minutes ago"
/>
```
### With tabs
PageTabs sit on the header's bottom rule; the current tab carries the underline.
```tsx
<PageHeader
        headingLevel="h3"
  title="finch"
  status={<Badge tone="info">Building</Badge>}
  description="finch.sproutboat.app"
  actions={<Button variant="primary">Deploy</Button>}
  tabs={
    <PageTabs>
      <PageTab href="/sprouts/finch" current>
        Overview
      </PageTab>
      <PageTab href="/sprouts/finch/deployments">Deployments</PageTab>
      <PageTab href="/sprouts/finch/logs">Logs</PageTab>
      <PageTab href="/sprouts/finch/settings">Settings</PageTab>
    </PageTabs>
  }
/>
```
## Props
### PageHeaderProps
Also takes every prop of `Omit<ComponentProps<"header">, "title">`.
| Prop | Type | Description |
| --- | --- | --- |
| breadcrumbs? | `ReactNode` | Usually <Breadcrumbs />. |
| title | `ReactNode` | Page title, rendered as the h1. |
| status? | `ReactNode` | Next to the title: a StatusDot or Badge. |
| description? | `ReactNode` | One muted line under the title: domain, repo, branch. |
| actions? | `ReactNode` | Buttons, right-aligned; they wrap under the title on narrow screens. |
| tabs? | `ReactNode` | Usually <PageTabs>. Sits on the header's bottom rule. |
| headingLevel? | `"h1" \| "h2" \| "h3" \| "h4"` | Heading level of the title. Default `h1`; use a lower level when the header is not the page's own title. |
### PageTabProps
Also takes every prop of `WithClass<useRender.ComponentProps<"a">>`.
| Prop | Type | Description |
| --- | --- | --- |
| current? | `boolean` | Marks the tab as the current page (aria-current and the underline). Default `false`. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### PageTabsProps

| Prop | Type | Description |
| --- | --- | --- |
| label? | `string` | Default `Page sections`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/page-header.tsx