// apps/docs/examples/ui/page.tsx'use client';
import {PlusIcon} from 'lucide-react';
import {Page} from '@workspace/active-ui/components/composed/page';import {PageHeader} from '@workspace/active-ui/components/composed/page-header';import {Badge} from '@workspace/active-ui/components/primitives/badge';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * The shell of a page with its header row: the title as `<h1>`, a badge * beside it, a description, and the page's actions, which move below the * heading on narrow screens. The page is fictitious and its buttons do * nothing. */export default function PageExample() {  return (    <div className="w-full rounded-md border">      <Page>        <PageHeader          title="Participants"          description="Everyone in the scheme, active and deferred."          suffix={<Badge variant="secondary">1,284</Badge>}          actions={            <>              <Button variant="outline" size="sm">                Export              </Button>              <Button size="sm">                <PlusIcon aria-hidden />                Add a participant              </Button>            </>          }        />        <div className="text-muted-foreground rounded-md border border-dashed p-6 text-center text-sm">          The page content: a table, a form, cards.        </div>      </Page>    </div>  );}