پرتوپرتو

متادیتای پست (PostMetadata)

ردیف metadata پست — likes، comments، shares، sentiment، authority score

معرفی

PostMetadata ردیف metadata پایین پست: تعامل (like/comment/share)، sentiment، authority score، تعداد view، و enrichment flags. building block داخلی PostCard.

فشرده (compact)

۱۲.۴K۸۷۶۱۲۴۴۲

گسترده (comfortable)

۱۲.۴K۸۷۶۱۲۴۴۲مثبت

زمین بازی

زمین بازی
۱۲.۴K۸۷۶۱۲۴۴۲مثبت
تنظیمات
ظاهر
محتوا
کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.

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

  • summary یک پست در یک سطر (بدون body) — مثل لیست top-posts در یک bulletin
  • override metadata در PostDetailsDrawer با placement جدا
  • ساخت compare-view چندتایی که می‌خواهید فقط metadata رو ببینید نه body

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

  • در PostCard خود metadata به‌صورت inline wired است

استفاده

import { PostCard, PostMetadata } from '@parto-system-design/ui'

// به‌صورت معمول داخل PostCard استفاده می‌شود (PostCard خود این primitive را wrap می‌کند):
<PostCard post={post} />

// استفاده مستقیم برای summary سطر-تک یک پست (بدون body):
<PostMetadata
  metrics={post.metrics}
  sentiment={post.sentiment}
  density="compact"
/>

اگر metrics تعریف نشده و sentiment هم پاس داده نشده، component چیزی رندر نمی‌کند. در حالت comfortable یک SentimentBadge کنار سایر متریک‌ها نمایش داده می‌شود.

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

بکنید

  • برای summary سطر-تک یک پست در لیست top-posts یا compare-view از PostMetadata مستقیم استفاده کنید - density را با والد PostCard همگام نگه دارید (compact در feed، comfortable در detail) - برای آیکون‌های متریک از aria-label معنادار (مانند «بازدید: ۱.۲هزار») استفاده کنید — کامپوننت پیش‌فرض این کار را انجام می‌دهد

نکنید

  • این کامپوننت را داخل PostCard دوباره فراخوانی نکنید — PostCard خودش metadata را inline wire کرده است - عددهای بزرگ را با کاما/نقطه‌ی Latin فرمت نکنید — formatNumber و convertToLocalNumbers به‌طور پیش‌فرض ارقام فارسی رندر می‌کنند

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

Prop

Type

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

  • هر متریک یک aria-label ساختاریافته («لایک: ۱۲هزار») دارد تا screen reader مقدار + برچسب را اعلام کند.
  • آیکون‌های Lucide به‌صورت decorative هستند (متن aria-label روی والد span قرار دارد، آیکون پنهان از a11y tree).
  • SentimentBadge در حالت comfortable با اسلات data-slot="sentiment-badge" خود ARIA semantics مناسب احساس را تأمین می‌کند.
  • این کامپوننت هیچ interactive element ندارد — keyboard navigation از عهده‌ی والد (PostCard/PostList) است.

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

  • کارت کاملPostCard
  • اکشن‌های inlinePostActions
  • headerPostHeader
  • محتواPostBody