معرفی

خانوادهٔ Page* مجموعهٔ ساختاریافته و اسلات‌محور چیدمان صفحه است، برگرفته از نسل جدید Page* سوپابیس و برای RTL امن‌شده (فقط خصوصیات منطقی، container-query محور). این خانواده سه لایه دارد: کانتینر عرض (PageContainer)، سربرگ ترکیبی صفحه (PageHeaderRoot + اجزایش) و بخش‌های صفحه (PageSection + اجزایش)، به‌علاوهٔ کرومِ تمام‌عرض (PageBreadcrumbs، PageNav).

چه زمانی استفاده کنیم:

• برای ساختن صفحات کامل با ریتم فاصله‌گذاری، عرض و سازماندهی یکنواخت
• وقتی به سربرگ ساخت‌یافته (آیکون، خلاصه، اقدامات، breadcrumb، تب‌های ناوبری) نیاز دارید
• برای صفحاتی با چند بخش که هرکدام عنوان/توضیح/اقدامات و بدنه دارند

چه زمانی استفاده نکنیم:

• برای یک عنوان سادهٔ یک‌خطی — از PageHeader تخت استفاده کنید
• برای چیدمان داخل یک کارت یا بخش کوچک — از Card/FormHeader استفاده کنید
• برای صفحات مستندات یا محتوای متنی که فریم‌ورک خودش را دارد

استفاده

import {
  PageContainer,
  PageHeaderRoot,
  PageHeaderMeta,
  PageHeaderSummary,
  PageHeaderTitle,
  PageHeaderDescription,
  PageHeaderAside,
  PageSection,
  PageSectionMeta,
  PageSectionSummary,
  PageSectionTitle,
  PageSectionDescription,
  PageSectionContent,
  Button,
} from '@partodata/ui'

export default function CampaignReport() {
  return (
    <>
      <PageHeaderRoot>
        <PageHeaderMeta>
          <PageHeaderSummary>
            <PageHeaderTitle>گزارش کمپین تخفیف فصلی</PageHeaderTitle>
            <PageHeaderDescription>نمای کلی عملکرد کمپین در شبکه‌های اجتماعی</PageHeaderDescription>
          </PageHeaderSummary>
          <PageHeaderAside>
            <Button variant="outline" size="sm">
              خروجی گزارش
            </Button>
          </PageHeaderAside>
        </PageHeaderMeta>
      </PageHeaderRoot>

      <PageContainer>
        <PageSection>
          <PageSectionMeta>
            <PageSectionSummary>
              <PageSectionTitle>پوشش انتشار</PageSectionTitle>
              <PageSectionDescription>تعداد پست‌های منتشرشده به تفکیک پلتفرم</PageSectionDescription>
            </PageSectionSummary>
          </PageSectionMeta>
          <PageSectionContent>{/* جدول یا نمودار */}</PageSectionContent>
        </PageSection>
      </PageContainer>
    </>
  )
}

اجزا و ساختار

PageContainer — کانتینر عرض

عرض حداکثر و padding افقی محتوا را تعیین می‌کند و context @container است که هر container-query داخلی نسبت به آن حل می‌شود. اندازه‌ها: small (۷۶۸px)، default (۱۲۰۰px)، large (۱۶۰۰px)، full (بدون حد).

<PageContainer size="default">{/* محتوا */}</PageContainer>

PageHeaderRoot — سربرگ ترکیبی

ریشهٔ سربرگ که size را از طریق context پخش می‌کند. اجزای آن:

• PageHeaderMeta — ردیف متا: چیدمان آیکون / خلاصه / aside
• PageHeaderIcon — آیکون پیشرو
• PageHeaderSummary — پشتهٔ عنوان + توضیح
• PageHeaderTitle — عنوان صفحه (h1، ۲۴px، وزن متوسط)
• PageHeaderDescription — متن پشتیبان زیر عنوان
• PageHeaderAside — خوشهٔ اقدامات (دکمه، منو)
• PageHeaderNavigationTabs — فوتر تب‌های ناوبری سربرگ
• PageHeaderBreadcrumb — ردیف breadcrumb داخل سربرگ (زیرجزء legacy؛ برای صفحات جدید PageBreadcrumbs را ترجیح دهید)

PageSection — بخش صفحه

هر بخش ۴۸px ریتم بالا، ۲۴px فاصلهٔ داخلی و ۴۸px دنبالهٔ آخرین بخش دارد. با orientation="horizontal" به یک گرید ۱fr/۲fr (متا ⁄ محتوا) در @3xl تقسیم می‌شود. اجزای آن:

• PageSectionMeta — ردیف متا: خلاصه + aside
• PageSectionSummary — پشتهٔ عنوان + توضیح
• PageSectionTitle — عنوان بخش (h2، ۲۰px، وزن متوسط)
• PageSectionDescription — متن پشتیبان زیر عنوان بخش
• PageSectionAside — خوشهٔ اقدامات بخش
• PageSectionContent — بدنهٔ اصلی بخش (فرم، جدول، گرید)

کرومِ تمام‌عرض — PageBreadcrumbs و PageNav

این دو ردیفِ کرومِ تمام‌عرض‌اند که بالای PageHeaderRoot می‌نشینند، نه داخل آن:

import {
  PageBreadcrumbs,
  PageBreadcrumbsActions,
  PageNav,
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  Button,
} from '@partodata/ui'
;<>
  <PageBreadcrumbs
    actions={
      <PageBreadcrumbsActions>
        <Button size="sm">اقدام</Button>
      </PageBreadcrumbsActions>
    }
  >
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/campaigns">کمپین‌ها</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbPage>کمپین تخفیف فصلی</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </PageBreadcrumbs>

  <PageNav>{/* یک NavMenu یا nav تب‌ها */}</PageNav>
</>

چیدمان افقی (دو ستونی)

<PageContainer size="large">
  <PageSection orientation="horizontal">
    {/* ستون باریک (1fr): متا/خلاصه */}
    <PageSectionMeta>
      <PageSectionSummary>
        <PageSectionTitle>خلاصهٔ اینفلوئنسر</PageSectionTitle>
        <PageSectionDescription>اطلاعات کلی و پلتفرم‌ها</PageSectionDescription>
      </PageSectionSummary>
    </PageSectionMeta>
    {/* ستون پهن (2fr): محتوای اصلی */}
    <PageSectionContent>{/* نمودارها و آمار */}</PageSectionContent>
  </PageSection>
</PageContainer>

راهنمای استفاده

جدول ویژگی‌ها

PageContainer

PageHeaderRoot

PageSection

PageSectionContent

PageBreadcrumbs

PageNav

دسترسی‌پذیری

• PageHeaderTitle یک h1 واقعی و PageSectionTitle یک h2 است، پس سلسله‌مراتب تیترها برای ناوبری صفحه‌خوان درست می‌ماند — در هر صفحه فقط یک PageHeaderTitle (h1) بگذارید
• کل خانواده از خصوصیات منطقی CSS (ps/pe، start/end) استفاده می‌کند و به‌صورت خودکار RTL-صحیح است
• چیدمان‌ها container-query محورند، پس در عرض‌های مختلف (نه فقط viewport) درست پاسخ می‌دهند؛ کرومِ تمام‌عرض ارتفاع ثابت ۴۸px دارد

کامپوننت‌های مرتبط

• PageHeader — برای یک عنوان تخت و prop-محور (بدون ساختار ترکیبی)، از PageHeader استفاده کنید
• چیدمان (الگو) — الگوی کاملِ ساخت صفحات (تنظیمات، لیست، داشبورد، جزئیات) با این خانواده
• صفحهٔ تحلیل — نمونهٔ کامل یک صفحهٔ تحلیل ساخته‌شده با Page*
• Breadcrumb — عناصر breadcrumb که داخل PageBreadcrumbs قرار می‌گیرند