سربرگ پست (PostHeader)

معرفی

PostHeader ردیف بالایی هر پست — avatar نویسنده + نام + handle + badge پلتفرم + timestamp + اکشن overflow. building block داخلی PostCard که برای کارت‌های سفارشی هم export شده.

زمین بازی

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

• ساخت کارت پست سفارشی که PostCard پوشش نمی‌دهد
• header در PostDetailsDrawer با محتوای زیر آن متفاوت
• توالی شبیه‌چت/comment thread که فقط header استاندارد می‌خواهد

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

• در PostCard خود PostHeader به‌صورت داخلی wired است؛ نیازی به override نیست

استفاده

import { PostCard, PostHeader } from '@partodata/ui'

// به‌صورت معمول از PostCard استفاده می‌شود — PostHeader به‌صورت داخلی wired است:
<PostCard post={post} />

// استفاده مستقیم برای کارت سفارشی:
<PostHeader
  author={post.author}
  platform={post.source}
  timestamp={post.timestamp}
  sentiment={post.sentiment}
  enrichments={post.enrichments}
  density="comfortable"
/>

density با والد PostCard همگام است (compact | comfortable).

واریانت‌های رسانه‌ای (Broadcast / Editorial)

PostHeader برای منابع سوشال طراحی شده که بازیگر آن یک حساب کاربری (PostAuthor) است. برای منابع رسانه‌ای، دو واریانت هم‌خانواده در کنار آن export شده‌اند که به‌جای نویسنده، یک رسانه (PostOutlet) را نمایش می‌دهند و همان پوسته‌ی بیرونی را دارند تا در فید ترکیبی یکدست دیده شوند:

• PostHeaderBroadcast — منابع پخشی tv و radio: عنوان از ترکیب «کانال · برنامه» ساخته می‌شود و برچسب فارسی منبع (تلویزیون / رادیو) کنار آن می‌آید. مناسب پایش پوشش تلویزیونی و رادیویی یک برند یا کمپین.
• PostHeaderEditorial — منابع تحریریه‌ای press و web: نام رسانه به‌همراه دامنه (LTR)، نشان اعتبار دامنه (DA) و در صورت وجود، خط «به قلم …» برای خبرنگار. مناسب پایش مطبوعات و پایگاه‌های خبری/وبی درباره‌ی محصول یا کمپین.

در PostCard انتخاب header خودکار است: بر اساس دسته‌ی post.source (تابع sourceCategory) یکی از سه واریانت social / broadcast / editorial رندر می‌شود. استفاده‌ی مستقیم فقط برای کارت‌های سفارشی لازم است.

PostHeaderBroadcast (تلویزیون / رادیو)

import { PostHeaderBroadcast } from '@partodata/ui'

<PostHeaderBroadcast
  source="tv"
  outlet={{
    name: 'شبکه اقتصاد کسب‌وکار',
    channel: 'شبکه اقتصاد کسب‌وکار',
    program: 'گفت‌وگوی ویژه رونمایی محصول جدید',
  }}
  timestamp={Date.now() - 60_000 * 45}
  enrichments={{ transcript: true }}
/>

علاوه بر موارد بالا، همه‌ی attributeهای استاندارد div نیز پذیرفته و روی root پخش می‌شوند.

PostHeaderEditorial (مطبوعات / وب)

import { PostHeaderEditorial } from '@partodata/ui'

<PostHeaderEditorial
  source="press"
  outlet={{
    name: 'روزنامه اقتصاد فردا',
    domain: 'eqtesadefarda.example',
    domainAuthority: 74,
  }}
  byline={{ name: 'نگار محمدی' }}
  timestamp={Date.now() - 60_000 * 60 * 5}
  enrichments={{ aiAnalysis: true, commentCount: 12 }}
/>

علاوه بر موارد بالا، همه‌ی attributeهای استاندارد div نیز پذیرفته و روی root پخش می‌شوند.

نکات دسترسی‌پذیری این دو واریانت مانند PostHeader است: زمان نسبی یک دکمه‌ی قابل‌فوکوس با Tooltip زمان مطلق است، Avatar رسانه aria-hidden است (نام رسانه به‌صورت متن مجاور خوانده می‌شود)، و آیکون منبع decorative است — برچسب متنی کنار آن مسئول a11y است.

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

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

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

• زمان نسبی (e.g. «۲ ساعت پیش») داخل یک <Tooltip> که زمان مطلق دقیق را نشان می‌دهد wrap می‌شود — کاربران keyboard با Tab + Focus زمان دقیق را می‌بینند.
• آیکون‌های platform badge و enrichment chipها decorative هستند؛ متن همراه (مثل «اینستاگرام»، «OCR») مسئول a11y است.
• Avatar fallback از حروف اول نام سازنده تولید می‌شود؛ اگر تصویر load نشود، aria-label به‌صورت پیش‌فرض نام کامل را اعلام می‌کند.
• این کامپوننت خود interactive نیست — focus + keyboard handling به عهده‌ی والد است.

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

• کارت کامل پست → PostCard
• اکشن‌های جداگانه → PostActions
• ردیف اطلاعات → PostMetadata
• محتوا → PostBody