نرخ تعامل

معرفی

کامپوننت نرخ تعامل (Engagement Rate) یک کامپوننت پیشرفته برای نمایش نرخ تعامل اینفلوئنسرها است که شامل:

• نمایش نرخ تعامل به صورت درصد با Badge رنگی
• نوار پیشرفت تقسیم‌بندی شده با 6 سطح (عالی، خیلی خوب، خوب، متوسط، قابل بهبود، ضعیف)
• مثلث شاخص برای نمایش موقعیت دقیق
• کارت اطلاعات دسته‌بندی (نانو، میکرو، متوسط، ماکرو، مگا)
• لیست معیارهای هر دسته با رنگ‌های متمایز
• پشتیبانی کامل از RTL و چند زبانه (فارسی، عربی، انگلیسی)

استفاده پایه

اندازه‌های مختلف نرخ تعامل

نرخ تعامل عالی (Nano Influencer)

نرخ تعامل خوب (Micro Influencer)

نرخ تعامل متوسط (Macro Influencer)

نرخ تعامل ضعیف (Mega Influencer)

بدون کارت دسته‌بندی

می‌توانید فقط نوار نرخ تعامل را بدون کارت اطلاعات نمایش دهید:

چند زبانه

فارسی (پیش‌فرض)

عربی

انگلیسی

دسته‌بندی اینفلوئنسرها

کامپوننت به طور خودکار بر اساس تعداد فالوورها، دسته مناسب را تشخیص می‌دهد:

نانو اینفلوئنسر (1K - 10K)

• عالی: بیشتر از 6%
• خیلی خوب: 5% - 6%
• خوب: 4% - 5%
• متوسط: 3% - 4%
• قابل بهبود: 1% - 3%
• ضعیف: کمتر از 1%

میکرو اینفلوئنسر (10K - 100K)

• عالی: بیشتر از 4%
• خیلی خوب: 3% - 4%
• خوب: 2% - 3%
• متوسط: 1% - 2%
• قابل بهبود: 0.5% - 1%
• ضعیف: کمتر از 0.5%

متوسط اینفلوئنسر (100K - 500K)

• عالی: بیشتر از 3%
• خیلی خوب: 2.5% - 3%
• خوب: 1.5% - 2.5%
• متوسط: 1% - 1.5%
• قابل بهبود: 0.5% - 1%
• ضعیف: کمتر از 0.5%

ماکرو اینفلوئنسر (500K - 1M)

• عالی: بیشتر از 2%
• خیلی خوب: 1.5% - 2%
• خوب: 1% - 1.5%
• متوسط: 0.5% - 1%
• قابل بهبود: 0.2% - 0.5%
• ضعیف: کمتر از 0.2%

مگا اینفلوئنسر (بیش از 1M)

• عالی: بیشتر از 1%
• خیلی خوب: 0.8% - 1%
• خوب: 0.5% - 0.8%
• متوسط: 0.3% - 0.5%
• قابل بهبود: 0.1% - 0.3%
• ضعیف: کمتر از 0.1%

Props

EngagementRate

موارد استفاده

داشبورد اینفلوئنسر

import { EngagementRate } from "@parto-system-design/ui";

export function InfluencerDashboard() {
  return (
    <div className="space-y-6">
      <h2>آمار حساب شما</h2>
      <EngagementRate currentRate={0.0571} followers={7864554} locale="fa" />
    </div>
  );
}

مقایسه اینفلوئنسرها

import { EngagementRate } from "@parto-system-design/ui";

export function CompareInfluencers() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h3>اینفلوئنسر A</h3>
        <EngagementRate currentRate={0.045} followers={15000} locale="fa" />
      </div>
      <div>
        <h3>اینفلوئنسر B</h3>
        <EngagementRate currentRate={0.062} followers={8500} locale="fa" />
      </div>
    </div>
  );
}

نمایش ساده

import { EngagementRate } from "@parto-system-design/ui";

export function SimpleEngagement() {
  return <EngagementRate currentRate={0.032} followers={250000} showCategoryCard={false} locale="fa" />;
}

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

• ✅ دسته‌بندی خودکار: تشخیص خودکار دسته اینفلوئنسر بر اساس فالوورها
• ✅ نوار پیشرفت هوشمند: 6 سطح رنگی با مثلث شاخص متحرک
• ✅ معیارهای دقیق: معیارهای استاندارد صنعت برای هر دسته
• ✅ چند زبانه: پشتیبانی از فارسی، عربی و انگلیسی
• ✅ RTL: پشتیبانی کامل از راست به چپ
• ✅ واکنش‌گرا: طراحی Responsive برای تمام صفحه‌نمایش‌ها
• ✅ سفارشی‌سازی: قابلیت نمایش یا مخفی کردن کارت دسته‌بندی
• ✅ اعداد محلی: تبدیل خودکار اعداد به فارسی/عربی

نکات مهم

• نرخ تعامل باید به صورت عدد اعشاری وارد شود (مثلاً 0.0571 برای 5.71%)
• کامپوننت به طور خودکار رنگ‌ها و معیارها را بر اساس دسته تنظیم می‌کند
• برای نمایش بهینه، از dir="rtl" در المان والد استفاده کنید
• برای اپلیکیشن‌های چند زبانه، prop locale را تنظیم کنید