import { PlusIcon } from '@phosphor-icons/react';
import { Button, PageActions, PageContainer, PageContent, PageDescription, PageHeader, PageTitle } from '@arbol-ai/ui';

<PageContainer className="px-0 md:px-0">
  <PageHeader>
    <div>
      <PageTitle>Campaigns</PageTitle>
      <PageDescription hideOnPhone>
        Outbound calls and WhatsApp messages your agents send for you.
      </PageDescription>
    </div>
    <PageActions>
      <Button variant="outline">Export</Button>
      <Button>
        <PlusIcon aria-hidden /> New campaign
      </Button>
    </PageActions>
  </PageHeader>
  <PageContent>
    <p className="text-muted-foreground rounded-card border p-6 text-sm">
      The campaigns list goes here.
    </p>
  </PageContent>
</PageContainer>

import { PhoneIcon } from '@phosphor-icons/react';
import { Button, DetailHeader, DetailHeaderContent, DetailHeaderInfo, DetailHeaderMeta, PageActions, PageContainer, PageTitle } from '@arbol-ai/ui';

<PageContainer className="px-0 md:px-0">
  <DetailHeader>
    <DetailHeaderContent>
      <span
        aria-hidden
        className="bg-brand-tint text-brand-accent grid size-12 shrink-0 place-content-center rounded-full font-medium"
      >
        LG
      </span>
      <DetailHeaderInfo>
        <PageTitle>Laura Gómez</PageTitle>
        <DetailHeaderMeta>
          +57 300 555 0101 · laura.gomez@example.com · Contact since May 4
        </DetailHeaderMeta>
      </DetailHeaderInfo>
    </DetailHeaderContent>
    <PageActions>
      <Button variant="outline">Edit</Button>
      <Button>
        <PhoneIcon aria-hidden /> Call
      </Button>
    </PageActions>
  </DetailHeader>
</PageContainer>