Components / Layout

PageHeader

Console page header: breadcrumb, icon, title and status, a one-line summary, actions and sub-page tabs. Every product page in the explorer starts with one.

Extracted fromExplorer

Import

tsx

import { PageHeader, PageBody } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { PageHeader, PageBody } from "@somnia-chain/ui/next"

Examples

Product page

The tabs switch in place. In an app each one is a page and current is the route.

Data & Truth / Somnia Oracle

Somnia Oracle

Live

Resolve any real-world question onchain, with receipts.

Ask a question

examples/page-header/default.tsxShow code

tsx

"use client"

import { Button, PageBody, PageHeader, Panel, Tabs } from "@somnia-chain/ui"
import { MessageCircleQuestion, Plus } from "lucide-react"

import { useInPlaceTabs } from "@/components/use-in-place-tabs"

export default function PageHeaderExample() {
  // In an app, `current` is the route and each href a page. Here pressing a tab just makes it current.
  const { current, linkAs } = useInPlaceTabs("#questions")
  return (
    <div className="bg-bg">
      <PageHeader
        crumbs={["Data & Truth", "Somnia Oracle"]}
        icon={<MessageCircleQuestion className="size-5" strokeWidth={1.75} />}
        title="Somnia Oracle"
        status="live"
        lede="Resolve any real-world question onchain, with receipts."
        actions={
          <Button href="#" size="sm">
            <Plus className="size-3.5" /> Ask a question
          </Button>
        }
        tabs={
          <Tabs
            current={current}
            linkAs={linkAs}
            links={[
              { href: "#questions", label: "Questions" },
              { href: "#templates", label: "Templates" },
              { href: "#sources", label: "Sources" },
            ]}
          />
        }
      />
      <PageBody>
        <Panel className="h-24" />
      </PageBody>
    </div>
  )
}

Console page

A crumb with an href links back, and makes the trail a breadcrumb nav. Any node can be the status, and a label names the tabs.

somnia-platform

Paused

Product site, Explorer, docs and the design system.

examples/page-header/console.tsxShow code

tsx

"use client"

import { Badge, buttonClass, PageBody, PageHeader, Panel, Tabs } from "@somnia-chain/ui"
import { FolderGit2 } from "lucide-react"

import { useInPlaceTabs } from "@/components/use-in-place-tabs"

export default function PageHeaderConsole() {
  // In an app, `current` is the route and each href a page. Here pressing a tab just makes it current.
  const { current, linkAs } = useInPlaceTabs("#config")
  return (
    <div className="bg-bg">
      <PageHeader
        crumbs={[{ label: "Repos", href: "#repos" }, "somnia-platform"]}
        icon={<FolderGit2 className="size-5" strokeWidth={1.75} />}
        title="somnia-platform"
        status={<Badge tone="warn">Paused</Badge>}
        lede="Product site, Explorer, docs and the design system."
        actions={
          <button type="button" className={buttonClass({ size: "sm", variant: "danger" })}>
            Stop runs
          </button>
        }
        tabs={
          <Tabs
            label="Repository views"
            current={current}
            linkAs={linkAs}
            links={[
              { href: "#config", label: "Full config" },
              { href: "#files", label: "Files" },
              { href: "#words", label: "In plain words" },
            ]}
          />
        }
      />
      <PageBody>
        <Panel className="h-24" />
      </PageBody>
    </div>
  )
}

Props

PageHeader

Prop	Type	Default	Description
title	ReactNode	—	Page title (h1).
icon	ReactNode	—	Shown in a bordered tile.
status	"live" \| "legacy" \| "soon" \| "todo" \| ReactElement	—	Beside the title: one of the four words draws its badge; an element is drawn as given, e.g. <Badge tone="warn">Paused</Badge>. Any other string is a type error, so a misspelt word is caught.
lede	ReactNode	—	Summary line.
crumbs	(string \| { label, href? })[]	—	Breadcrumb, joined with /. An entry with an href is a link, and makes the trail a nav named Breadcrumb; without one it is plain text.
actions	ReactNode	—	Right-hand buttons.
tabs	ReactNode	—	Usually <Tabs /> or <NavTabs />.
linkAs	LinkComponent	<a>	Component for internal links. @somnia-chain/ui/next sets it to next/link.
...props	<div> attributes	—	Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <div>.

PageBody

Prop	Type	Default	Description
...props	<div> attributes	—	Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <div>.