چیپ نوع عملیات (ActionTypeChip)

معرفی

ActionTypeChip یک chip فشرده و color-coded برای نمایش نوع یک عملیات اجتماعی است — مستقل از اینکه موفق یا ناموفق بوده (که با ActionStatusKey در ActionTimeline مدل می‌شود).

هفت نوع canonical: like / comment / save / follow / unfollow / dm / share — هرکدام با:

• آیکون اختصاصی Lucide (Heart / MessageCircle / Bookmark / UserPlus / UserMinus / Send / Share2)
• token رنگ اختصاصی (--action-type-*) که هم در light و هم dark mode تنظیم شده

چه زمانی استفاده کنیم:

• لیست عملیات Booster (فید worker، صف اجرا، گزارش روزانه)
• ستون نوع عملیات در DataTable لاگ عملیات
• badge کوتاه روی ActionTimelineItem
• نمایش آمار «x تعامل» در داشبورد (<ActionTypeChip type="like" count={425} />)

چه زمانی استفاده نکنیم:

• نمایش وضعیت عملیات (موفق/ناموفق) — از ActionTimeline + ActionStatusKey استفاده کنید
• نمایش شدت (فوری/بالا/…) — از SeverityBadge استفاده کنید
• نمایش پلتفرم (اینستاگرام/توییتر) — از SocialPlatformBadge استفاده کنید
• وقتی دامنه شما عملیات غیر-اجتماعی (ایمپورت، بکاپ، …) است — از chip عمومی یا Badge استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

'use client'
import { ActionTypeChip } from '@parto-system-design/ui'

export function MyActivity() {
  return (
    <div className="flex gap-2">
      <ActionTypeChip type="like" />
      <ActionTypeChip type="comment" />
      <ActionTypeChip type="save" count={42} />
      <ActionTypeChip type="follow" variant="solid" />
      <ActionTypeChip type="dm" showLabel={false} />
    </div>
  )
}

چهار حالت بصری

• soft (پیش‌فرض) — پس‌زمینه tint + متن رنگی. کاربرد: فید، جدول، لیست — خوانا ولی نه پر سر و صدا.
• solid — پس‌زمینه کامل + متن سفید. کاربرد: تأکید روی یک عملیات خاص، call-to-action، chip یک‌عددی.
• outline — فقط border + متن. کاربرد: ردیف فشرده، جایی که نمی‌خواهید بار بصری اضافه شود.
• flat — فقط آیکون + متن رنگی، بدون chrome. کاربرد: inline در متن (مثلاً «۱۲ پسند دریافت شد» با آیکون قلب کوچک).

چهار اندازه

• xs (ارتفاع ۲۰px) — برای جدول‌های فشرده یا metadata در کارت‌های کوچک
• sm (ارتفاع ۲۴px) — پیش‌فرض، مناسب اکثر موارد
• md (ارتفاع ۲۸px) — برای header یا هدف‌گذاری بصری
• lg (ارتفاع ۳۲px) — CTA یا نمایش برجسته

با شمارنده

با count={n} یک شمارنده کنار label اضافه می‌شود — مفید برای نمایش آمار جمع‌آوری‌شده («۴۲۵ پسند»). عدد خودکار با locale فرمت می‌شود (۴۲۵ → ۴٫۰۰۰).

همه هفت نوع canonical

• like (پسندیدن — پینک) • comment (نظر — آبی) • save (ذخیره — کهربایی) • follow (دنبال کردن — سبز) • unfollow (لغو دنبال — خاکستری) • dm (پیام مستقیم — بنفش) • share (اشتراک — سبز آبی)

حالت iconOnly (بدون برچسب)

با showLabel={false}، فقط آیکون رندر می‌شود و aria-label با برچسب محلی (locale-aware) تنظیم می‌شود. مناسب برای نمای‌های بسیار فشرده مثل ستون جدول، ActionTimeline marker، header فید.

راهنمای استفاده

Props

token ها

هر نوع از یک CSS variable استفاده می‌کند که در هر دو theme light و dark تنظیم شده:

برای استفاده مستقیم در Tailwind: text-action-type-like، bg-action-type-follow، … (از Tailwind config).

دسترسی‌پذیری

• هم chip سطح root یک <span> با data-slot="action-type-chip" است — در داخل هر container نیاز به wrapper aria نیست.
• در حالت showLabel={false}، aria-label با برچسب محلی (مثلاً «پسندیدن») ست می‌شود تا screen reader آن را announce کند.
• اگر label شما یک React node (نه رشته) است، حالت iconOnly aria-label ست نمی‌کند — مسئولیت aria با شماست.
• همه هفت رنگ در light و dark بررسی کنتراست‌ شده‌اند (سه variant soft, outline, flat با foreground و solid با white).
• آیکون‌ها aria-hidden="true" هستند — اطلاعات معنایی از label یا aria-label می‌آید، نه از آیکون.

کامپوننت‌های مرتبط

• ActionTimeline — برای نمایش فید زمانی عملیات؛ از ActionTypeChip داخل tag slot هر item استفاده کنید
• SocialPlatformBadge — badge مشابه اما برای پلتفرم (اینستاگرام / توییتر / …)؛ این chip برای عملیات است
• StatusBadge — برای وضعیت عملیاتی (critical/warning/middle/low) — متعامد با نوع
• Badge — badge عمومی بدون قید دامنه
• EntityHealthCard — وقتی می‌خواهید نوع عملیات را در سیاق سلامت یک worker نمایش دهید