Page Header

File: page-header-demo.tsx
"use client";

import {
  Breadcrumbs,
  Button,
  ButtonGroup,
  Container,
  IconAdd,
  IconInformation,
  PageHeaderView,
  SliderContent,
  SliderSection,
  StackLayout,
  Tab,
  Tabs,
  Tile,
  TileContent,
  TileHeader,
} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

const tabs: Tab[] = [{label: "Overview"}, {label: "Details", icon: <IconInformation />}];

export const PageHeaderDemo = () => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <PageHeaderView
      pageHeaderTitle={"Quarterly report"}
      subtitle={"Updated 5 minutes ago"}
      backButtonHref={"#back"}
      buttons={
        <ButtonGroup>
          <Button color={"neutral"}>Export</Button>
          <Button primaryIcon={<IconAdd />}>New report</Button>
        </ButtonGroup>
      }
      breadcrumbs={
        <Breadcrumbs
          breadcrumbs={[
            {title: "Reports", href: "#reports"},
            {title: "2026", href: "#2026"},
          ]}
        />
      }
      tabs={<Tabs tabs={tabs} activeIndex={activeTab} onChange={setActiveTab} />}>
      <Container direction={"both"}>
        <StackLayout>
          <SliderSection activeIndex={activeTab}>
            <SliderContent>
              <Tile>
                <TileHeader>Overview</TileHeader>
                <TileContent>
                  The page header stays at the top while the page scrolls. It holds the breadcrumbs,
                  a back button, the title with a subtitle, the actions of the page and tabs.
                </TileContent>
              </Tile>
            </SliderContent>
            <SliderContent>
              <Tile>
                <TileHeader>Details</TileHeader>
                <TileContent>The tabs switch the content below the header.</TileContent>
              </Tile>
            </SliderContent>
          </SliderSection>
          {Array.from({length: 6}, (_, index) => (
            <Tile key={index}>
              <TileHeader>Section {index + 1}</TileHeader>
              <TileContent>Scroll down to see the header stick to the top.</TileContent>
            </Tile>
          ))}
        </StackLayout>
      </Container>
    </PageHeaderView>
  );
};