ناوبری بخش‌ها (SectionNavigator)

import { SectionNavigator } from '@parto-system-design/ui'

const sections = [
  { id: 'overview', label: 'خلاصه' },
  { id: 'engagement', label: 'تعامل' },
  { id: 'content', label: 'محتوا' },
]

<SectionNavigator sections={sections} />

<div className="grid grid-cols-1 lg:grid-cols-[220px_1fr] gap-6">
  <aside className="hidden lg:block sticky top-20 h-fit">
    <SectionNavigator sections={sections} offset={80} />
  </aside>

  <div>
    <section id="overview">...</section>
    <section id="engagement">...</section>
    <section id="content">...</section>
  </div>
</div>

import { BarChart3, Users, FileText } from 'lucide-react'

const sections = [
  { id: 'stats', label: 'آمار', icon: <BarChart3 className="size-4" /> },
  { id: 'audience', label: 'مخاطبان', icon: <Users className="size-4" /> },
  { id: 'reports', label: 'گزارش‌ها', icon: <FileText className="size-4" /> },
]

<SectionNavigator sections={sections} />

interface SectionItem {
  id: string // باید با id عنصر HTML مطابقت داشته باشد
  label: string // متن نمایشی
  icon?: React.ReactNode // آیکون اختیاری
}