حالت‌های خالی

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

<Empty
  title="اینفلوئنسری اضافه نشده"
  description="اولین اینفلوئنسر را به لیست پایش خود اضافه کنید"
  action={<Button variant="primary">افزودن اینفلوئنسر</Button>}
/>

import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@parto-system-design/ui'
import { Search } from 'lucide-react'

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="text-muted">نام اینفلوئنسر</TableHead>
      <TableHead className="text-muted">پلتفرم</TableHead>
      <TableHead className="text-muted">نرخ تعامل</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="hover:bg-transparent">
      <TableCell colSpan={3} className="text-center py-10">
        <div className="flex flex-col items-center gap-2">
          <Search className="h-8 w-8 text-muted-foreground/40" />
          <p className="text-sm text-muted-foreground">نتیجه‌ای یافت نشد</p>
          <p className="text-xs text-muted-foreground">فیلترها را تغییر دهید یا جستجوی جدیدی انجام دهید</p>
        </div>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

import { DataTable, Empty } from '@parto-system-design/ui'

<DataTable
  columns={columns}
  data={[]}
  emptyState={
    <Empty
      title="نتیجه‌ای یافت نشد"
      description="فیلترها را تغییر دهید"
      action={<Button variant="outline" onClick={clearFilters}>پاک کردن فیلترها</Button>}
    />
  }
/>

<div className="flex flex-col items-center justify-center min-h-[300px] rounded-lg border border-dashed p-8">
  <Users className="h-12 w-12 text-muted-foreground/40 mb-4" />
  <h3 className="text-base font-semibold mb-2">اینفلوئنسری اضافه نشده</h3>
  <p className="text-sm text-muted-foreground text-center mb-6 max-w-xs">
    اینفلوئنسرهای مورد نظر را به لیست پایش اضافه کنید تا آمار و تحلیل‌های آن‌ها را ببینید
  </p>
  <Button variant="primary">افزودن اینفلوئنسر</Button>
</div>

<Table>
  <TableBody>
    <TableRow className="hover:bg-transparent">
      <TableCell colSpan={columnCount} className="text-center text-muted py-8">
        هیچ داده‌ای وجود ندارد
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

import { Alert, AlertTitle, AlertDescription } from '@parto-system-design/ui'
import { AlertCircle } from 'lucide-react'

<div className="flex items-center justify-center min-h-[300px]">
  <Alert variant="destructive" className="max-w-md">
    <AlertCircle className="h-4 w-4" />
    <AlertTitle>یافت نشد</AlertTitle>
    <AlertDescription>
      این پروفایل وجود ندارد یا حذف شده است.
      <a href="/influencers" className="block mt-2 underline">بازگشت به لیست اینفلوئنسرها</a>
    </AlertDescription>
  </Alert>
</div>