ناوبری

import { ProductFrame, type ProductFrameNavGroup } from '@partodata/ui/product-frame'

const nav: ProductFrameNavGroup[] = [
  {
    id: 'main',
    items: [
      { id: 'dashboard', label: 'داشبورد', icon: <LayoutDashboard />, href: '/' },
      { id: 'influencers', label: 'اینفلوئنسرها', icon: <Users />, href: '/influencers' },
      { id: 'analytics', label: 'تحلیل‌ها', icon: <BarChart2 />, href: '/analytics' },
    ],
  },
  { id: 'system', label: 'سیستم', items: [{ id: 'settings', label: 'تنظیمات', icon: <Settings />, href: '/settings' }] },
]

<ProductFrame product={{ name: 'پایش برند' }} nav={nav} pathname={pathname} linkComponent={Link}>
  {children}
</ProductFrame>

import { CustomPage, PageSection } from '@partodata/ui/templates'
import { TableOfContents } from '@partodata/ui'
import { BarChart3, FileText, Smile } from 'lucide-react'

const sections = [
  { id: 'summary', label: 'خلاصه', icon: <FileText /> },
  { id: 'trend', label: 'روند منشن‌ها', icon: <BarChart3 /> },
  { id: 'sentiment', label: 'احساس مخاطبان', icon: <Smile /> },
]

export default function WeeklyReportPage() {
  return (
    <CustomPage
      dsGap="DS-GAP-14: فهرست بخش‌های گزارش در ستون کناری صفحه"
      title="گزارش هفتگی کمپین"
      description="عملکرد کمپین تخفیف فصلی در هفتهٔ گذشته"
      width="wide"
    >
      <PageSection>
        {/* موبایل: فهرست بالای محتوا · از lg: ستون کناری چسبان در سمت شروع (راست) */}
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[220px_1fr]">
          <aside className="lg:sticky lg:top-20 lg:h-fit">
            <TableOfContents items={sections} offset={80} title="بخش‌های گزارش" />
          </aside>
          <div className="flex flex-col gap-8">
            <section id="summary">…</section>
            <section id="trend">…</section>
            <section id="sentiment">…</section>
          </div>
        </div>
      </PageSection>
    </CustomPage>
  )
}

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@partodata/ui'
;<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/campaigns">کمپین‌ها</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="/campaigns/summer-2024">تابستان 1403</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>اینفلوئنسرها</BreadcrumbPage>
  </BreadcrumbItem>
</Breadcrumb>

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from '@partodata/ui'
import { User, Settings, LogOut } from 'lucide-react'
;<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="sm">
      <Avatar src={user.avatar} />
      <span>{user.name}</span>
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem asChild>
      <Link href="/profile">
        <User className="me-2 h-4 w-4" />
        پروفایل
      </Link>
    </DropdownMenuItem>
    <DropdownMenuItem asChild>
      <Link href="/settings">
        <Settings className="me-2 h-4 w-4" />
        تنظیمات
      </Link>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onClick={handleLogout} className="text-destructive">
      <LogOut className="me-2 h-4 w-4" />
      خروج از حساب
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@partodata/ui'
;<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href={`?page=${currentPage - 1}`} />
    </PaginationItem>
    {pages.map((page) => (
      <PaginationItem key={page}>
        <PaginationLink href={`?page=${page}`} isActive={page === currentPage}>
          {page}
        </PaginationLink>
      </PaginationItem>
    ))}
    <PaginationItem>
      <PaginationNext href={`?page=${currentPage + 1}`} />
    </PaginationItem>
  </PaginationContent>
</Pagination>

// app/frame.tsx — با pathname از Next.js
const pathname = usePathname()

<ProductFrame product={product} nav={nav} pathname={pathname} linkComponent={Link}>
  {children}
</ProductFrame>

// درست — آیکون + متن
<NavItem href="/dashboard" icon={LayoutDashboard}>
  داشبورد
</NavItem>

// نادرست — آیکون تنها (بدون متن، بدون aria-label)
<a href="/dashboard">
  <LayoutDashboard />
</a>

منوی ProductFrame (اصلی)
  └── NavMenu / Tabs (محلی)
         └── Breadcrumb (مکانی)

// نادرست — margin فیزیکی؛ در RTL شمارنده به‌جای لبهٔ انتهایی کنار متن می‌چسبد
<Link href="/campaigns" className="flex items-center gap-2">
  <Megaphone />
  <span>کمپین‌ها</span>
  <Badge className="ml-auto">12</Badge>
</Link>

// درست — Logical Properties در هر دو جهت درست کار می‌کند
<Link href="/campaigns" className="flex items-center gap-2">
  <Megaphone />
  <span>کمپین‌ها</span>
  <Badge className="ms-auto">12</Badge>
</Link>

// نادرست — رنگ hardcode؛ در تم تیرهٔ پیش‌فرض کنتراست ندارد و aria-current هم تنظیم نمی‌شود
<NavItem href="/dashboard" icon={LayoutDashboard} className={pathname === '/dashboard' ? 'bg-gray-100 text-blue-600' : ''}>
  داشبورد
</NavItem>

// درست — active هم استایل توکن‌محور می‌دهد و هم aria-current="page"
<NavItem href="/dashboard" icon={LayoutDashboard} active={pathname === '/dashboard'}>
  داشبورد
</NavItem>

// نادرست — جهت آیکون ثابت شده و فقط در یکی از دو جهت درست است
<BreadcrumbSeparator>
  <ChevronLeft />
</BreadcrumbSeparator>

// درست — جداکنندهٔ پیش‌فرض خودش جهت‌آگاه است
<BreadcrumbSeparator />

// نادرست — rows فقط 20 ردیف صفحهٔ فعلی است؛ همیشه «صفحهٔ 1 از 1» محاسبه می‌شود
const totalPages = Math.ceil(rows.length / pageSize)

// درست — تعداد کل را سرور گزارش می‌کند
const totalPages = Math.ceil(data.totalCount / pageSize)

// نادرست — لحن محاوره‌ای و جملهٔ دستوری
<BreadcrumbLink href="/campaigns">برگرد به کمپین‌ها</BreadcrumbLink>

// درست — فارسی رسمی؛ برچسب Breadcrumb نام مقصد است، نه جمله
<BreadcrumbLink href="/campaigns">کمپین‌ها</BreadcrumbLink>