الگوهای ریسپانسیو

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>دنبال‌کننده‌ها</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۱۲۵ هزار</MetricCardValue>
    </MetricCardContent>
  </MetricCard>
  <MetricCard>
    <MetricCardHeader>
      <MetricCardLabel>تعامل</MetricCardLabel>
    </MetricCardHeader>
    <MetricCardContent>
      <MetricCardValue>۴.۲٪</MetricCardValue>
    </MetricCardContent>
  </MetricCard>
  {/* ... */}
</div>

import {
  SidebarProvider,
  Sidebar,
  SidebarTrigger,
  SidebarInset,
  SidebarContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from '@partodata/ui'
import { BarChart2, Users, Settings } from 'lucide-react'

export function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive>
                <BarChart2 />
                داشبورد
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton>
                <Users />
                اینفلوئنسرها
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton>
                <Settings />
                تنظیمات
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>

      <SidebarInset>
        {/* دکمه باز/بسته کردن سایدبار فقط در موبایل نمایش داده می‌شود */}
        <header className="flex items-center gap-2 border-b p-4 md:hidden">
          <SidebarTrigger />
          <span className="font-semibold">پارتو</span>
        </header>

        <main className="flex-1 p-4 md:p-6">{children}</main>
      </SidebarInset>
    </SidebarProvider>
  )
}

import { DataTable, type DataTableColumn } from '@partodata/ui'

// ۱. جدول با scroll افقی برای موبایل
;<div className="overflow-x-auto">
  <DataTable columns={columns} data={data} />
</div>

// ۲. پنهان کردن ستون‌های کم‌اهمیت در موبایل
const columns: DataTableColumn<Row>[] = [
  { id: 'name', header: 'نام', cell: (row) => row.name },
  {
    id: 'followers',
    header: 'دنبال‌کننده‌ها',
    cell: (row) => row.followers.toLocaleString('en-US'),
    // این ستون در موبایل پنهان می‌شود (با className)
    className: 'hidden sm:table-cell',
  },
  {
    id: 'engagement',
    header: 'تعامل',
    cell: (row) => `${row.engagement}٪`,
    className: 'hidden md:table-cell',
  },
  {
    id: 'status',
    header: 'وضعیت',
    cell: (row) => <Badge>{row.status}</Badge>,
  },
]

import { Avatar, AvatarImage, AvatarFallback, Badge, SocialPlatformBadge } from '@partodata/ui'

function InfluencerProfileHeader({ influencer }) {
  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      {/* اطلاعات اصلی */}
      <div className="flex items-center gap-4">
        <Avatar className="size-16">
          <AvatarImage src={influencer.avatar} />
          <AvatarFallback>{influencer.name[0]}</AvatarFallback>
        </Avatar>

        <div className="flex flex-col gap-1">
          <h1 className="text-xl font-bold">{influencer.name}</h1>
          <div className="flex flex-wrap items-center gap-2">
            <SocialPlatformBadge platform={influencer.platform} />
            <Badge variant="outline">@{influencer.username}</Badge>
          </div>
        </div>
      </div>

      {/* آمار — در موبایل زیر اطلاعات، در دسکتاپ کنار */}
      <div className="grid grid-cols-3 gap-4 rounded-lg border p-4 sm:flex sm:gap-8">
        <div className="text-center">
          <p className="text-lg font-bold">{influencer.followers.toLocaleString('en-US')}</p>
          <p className="text-xs text-foreground-lighter">دنبال‌کننده</p>
        </div>
        <div className="text-center">
          <p className="text-lg font-bold">{influencer.following.toLocaleString('en-US')}</p>
          <p className="text-xs text-foreground-lighter">دنبال‌کننده</p>
        </div>
        <div className="text-center">
          <p className="text-lg font-bold">{influencer.posts.toLocaleString('en-US')}</p>
          <p className="text-xs text-foreground-lighter">پست</p>
        </div>
      </div>
    </div>
  )
}

'use client'

import { useState } from 'react'
import {
  Button,
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerFooter,
  DrawerClose,
  SearchInput,
  ToggleGroup,
  ToggleGroupItem,
} from '@partodata/ui'
import { SlidersHorizontal } from 'lucide-react'

function SearchWithFilters() {
  const [filtersOpen, setFiltersOpen] = useState(false)
  const [activeFilters, setActiveFilters] = useState<string[]>([])

  const filterOptions = [
    { label: 'اینستاگرام', value: 'instagram' },
    { label: 'تیک‌تاک', value: 'tiktok' },
    { label: 'میکرو اینفلوئنسر', value: 'micro' },
    { label: 'ماکرو اینفلوئنسر', value: 'macro' },
  ]

  return (
    <div className="flex flex-col gap-3">
      {/* نوار جستجو + دکمه فیلتر */}
      <div className="flex gap-2">
        <SearchInput placeholder="جستجوی اینفلوئنسر..." className="flex-1" />
        {/* دکمه فیلتر — در موبایل نمایش داده می‌شود */}
        <Button variant="outline" size="sm" className="md:hidden" onClick={() => setFiltersOpen(true)}>
          <SlidersHorizontal className="size-4" />
          فیلترها
        </Button>
      </div>

      {/* فیلترهای inline — فقط در دسکتاپ */}
      <div className="hidden flex-wrap gap-2 md:flex">
        <ToggleGroup type="multiple" value={activeFilters} onValueChange={setActiveFilters}>

          {filterOptions.map((filter) => (

            <ToggleGroupItem key={filter.value} value={filter.value}>

              {filter.label}

            </ToggleGroupItem>

          ))}

        </ToggleGroup>
      </div>

      {/* Drawer فیلتر برای موبایل */}
      <Drawer open={filtersOpen} onOpenChange={setFiltersOpen} direction="bottom">
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>فیلترها</DrawerTitle>
          </DrawerHeader>

          <div className="flex flex-wrap gap-2 p-4">
            <ToggleGroup type="multiple" value={activeFilters} onValueChange={setActiveFilters}>

              {filterOptions.map((filter) => (

                <ToggleGroupItem key={filter.value} value={filter.value}>

                  {filter.label}

                </ToggleGroupItem>

              ))}

            </ToggleGroup>
          </div>

          <DrawerFooter>
            <DrawerClose asChild>
              <Button>اعمال فیلترها</Button>
            </DrawerClose>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </div>
  )
}

import { PartoLineChart } from '@partodata/ui'

// ارتفاع نمودار بر اساس اندازه صفحه
function ResponsiveChart({ data }) {
  return (
    <div>
      {/* موبایل: ارتفاع کمتر */}
      <div className="block sm:hidden">
        <PartoLineChart data={data} height={200} />
      </div>
      {/* تبلت و دسکتاپ: ارتفاع معمول */}
      <div className="hidden sm:block">
        <PartoLineChart data={data} height={350} />
      </div>
    </div>
  )
}

import { useIsMobile } from '@partodata/ui'

function FiltersArea() {
  const isMobile = useIsMobile()

  // در SSR و اولین paint، مقدار همیشه false است؛
  // کاربر موبایل یک فریم FiltersInline را می‌بیند (فلش کوتاه).
  return isMobile ? <FiltersDrawer /> : <FiltersInline />
}

// WRONG — physical
<div className="ml-4 sm:ml-0">

// CORRECT — logical (RTL-safe)
<div className="ms-4 sm:ms-0">

// ❌ غلط — فیزیکی؛ فقط در نمای دسکتاپِ RTL خراب می‌شود و در تست موبایل دیده نمی‌شود
<div className="flex flex-col md:flex-row">
  <Button className="md:ml-auto">ذخیره گزارش کمپین</Button>
</div>

// ✅ درست — خواص منطقی (logical) در همهٔ breakpointها
<div className="flex flex-col md:flex-row">
  <Button className="md:ms-auto">ذخیره گزارش کمپین</Button>
</div>

// ❌ غلط — رنگ ثابت؛ در تم تیرهٔ پیش‌فرض، یک نوار سفید ناهماهنگ ظاهر می‌شود
<header className="flex items-center gap-2 border-b border-gray-200 bg-white p-4 md:hidden">
  <SidebarTrigger />
</header>

// ✅ درست — توکن‌های معنایی؛ در هر دو تم درست رندر می‌شود
<header className="flex items-center gap-2 border-b border-border bg-background p-4 md:hidden">
  <SidebarTrigger />
</header>

// ❌ غلط — هر دو نمونه mount می‌شوند: دو بار fetch و دو state صفحه‌بندی جداگانه
<div className="sm:hidden">
  <CampaignPostsTable pageSize={10} />
</div>
<div className="hidden sm:block">
  <CampaignPostsTable pageSize={50} />
</div>

// ✅ درست — یک نمونه با fetch واحد؛ تفاوت نمایش با className ستون‌ها (الگوی ۳)
<div className="overflow-x-auto">
  <DataTable columns={columns} data={rows} pagination={pagination} />
</div>

// ❌ غلط — نمای موبایل برای همیشه در ۱۰ ردیف اولِ همان یک صفحه‌ای که سرور برگردانده گیر می‌کند
{isMobile
  ? rows.slice(0, 10).map((row) => <PostCard key={row.id} {...row} />)
  : <DataTable columns={columns} data={rows} pagination={pagination} />}

// ✅ درست — fetch و state بیرون از دو شاخه است؛ هر دو نما از همان صفحه‌بندی سرور تغذیه می‌شوند
<div className="flex flex-col gap-3 sm:hidden">
  {rows.map((row) => (
    <PostCard key={row.id} {...row} />
  ))}
  <PaginationControlled currentPage={page} totalPages={totalPages} onPageChange={setPage} />
</div>
<div className="hidden sm:block">
  <DataTable
    columns={columns}
    data={rows}
    pagination={{ currentPage: page, totalPages, onPageChange: setPage, totalRows }}
  />
</div>

// ❌ غلط — تغییر لحن؛ محاوره‌ای در موبایل، رسمی در دسکتاپ
<Button className="sm:hidden">اعمال کن</Button>

// ✅ درست — کوتاه‌سازی با حذف واژه، نه حذف رسمیت
<Button className="sm:hidden">اعمال فیلترها</Button>

// ✅ درست — یا فقط آیکون با برچسب دسترس‌پذیر کامل
<Button size="icon" className="sm:hidden" aria-label="اعمال فیلترها">
  <Check />
</Button>