کارت پست (PostCard)

معرفی

PostCard اصلی‌ترین کامپوننت نمایش پست در دیزاین‌سیستم پارتو است. به جای تقلید از UI هر پلتفرم، ساختار یکسانی ارائه می‌دهد و بدنه‌ی پست را بر اساس نوع محتوا (متن، تصویر تکی، کاروسل، ویدیو، مدیای دانلودنشده) رندر می‌کند. تصاویر با هر نسبت ابعادی (1:1، 4:5، 9:16، 16:9) به‌صورت یکنواخت با بک‌دراپ بلور نمایش داده می‌شن — بدون کراپ، بدون فضای خالی زشت.

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

• فید نتایج جستجو / پایش در محصولات سوشال‌لیسنینگ و افکارسنجی
• triage روزانه تحلیل‌گر (حالت فشرده) و مرور عمیق (حالت راحت)
• لیست چندمنبعی پست‌ها با نیاز به اسکن‌پذیری بالا یا بررسی دقیق
• داشبورد تحلیل برند، ردیابی هشتگ، یا بولتن تحلیلی

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

• نمایش یک کامنت مجزا → از CommentCard استفاده کنید
• نمایش کارت اطلاعاتی بدون ساختار پست (محصول، پروفایل، کار) → از Card، ProfileCard، یا JobCard استفاده کنید
• فقط نشان پلتفرم بدون ساختار پست → از SocialPlatformBadge استفاده کنید

خف

خبرگزاری فارس@farsnews

۳ ساعت پیش·تحلیل۲۱۸ کامنت

گزارشی درباره‌ی وضعیت اکوسیستم استارتاپی کشور و شاخص‌های کلیدی فصل اخیر؛ بررسی روند رشد سرمایه‌گذاری و چالش‌های پیش روی شرکت‌های نوپا در حوزه فناوری.

۴.۱K۲۱۸۶۷۸۴.۵K۳.۴٪

مثبتفارسی

زمین بازی

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

زمین بازی

بازنشانی

عر

علی رضایی@ali_r

۴۵ دقیقه پیش

Micro

این یک متن نمونه برای کارت پست است که حس و حال محتوای واقعی را منتقل می‌کند. #پارتو #افکارسنجی

۱.۲K۸۹۲۲۱۲.۵K۴.۲٪

مثبت

تنظیمات

ظاهر

حالت نمایشcomfortablecompactgrid

منبعinstagramtwittertiktokyoutubelinkedintelegramthreadsfacebooktvradiopressweb

احساسpositivenegativeneutralmixednone

شدتnonelowmediumhighcritical

داده

نوع رسانهnoneimagegridcarouselvideoaudiosource-removedmissing-media

سطح تأثیرگذاریnonenanomicromacromega

تعداد کامنت

حالت

وضعیت رسانهreadyloadingfailedunavailable

محتوای حساس (NSFW)

تأیید‌شده

سنجاق‌شده

تبلیغ

ویرایش‌شده

بخشی از رشته

نقل‌قول

بازنشر شده

قابل انتخاب

نشان «تحلیل»

نشان OCR

نشان «رونوشت»

محتوا

متن طولانی

زبان متنfaenarkutr

بایو در HoverCard

فالوور/فالووینگ/پست در HoverCard

کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.

استفاده

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

const post: PostData = {
  id: 'p1',
  source: 'instagram',
  author: { name: 'سارا احمدی', handle: 'sara.ahmadi', verified: true },
  timestamp: Date.now() - 60_000 * 23,
  body: { type: 'text', text: 'تجربه خریدم از #دیجی‌کالا عالی بود!' },
  sentiment: 'positive',
  metrics: { views: 12400, likes: 876, comments: 124 },
}

export default function Example() {
  return (
    <PostCard
      post={post}
      view="comfortable"
      onOpen={(p) => console.log('open', p.id)}
      onOpenDetails={(p) => console.log('details', p.id)}
    />
  )
}

حالت‌ها و انواع

چگالی فشرده (Triage)

برای فیدهایی که کاربر باید سریع اسکن کند. ارتفاع ردیف ثابت، متن تا دو خط، thumbnail کوچک. اکشن‌های آیکنی فقط در زمان هاور یا فوکوس ظاهر می‌شن.

خر

خبرگزاری رسمی۶ دقیقه پیش

آخرین گزارش از وضعیت بازار سرمایه طی هفته جاری منتشر شد؛ شاخص کل با رشد ۲.۳ درصدی به رکورد تاریخی رسید و حجم معاملات به طور چشمگیری افزایش یافت.

مثبت

کا

کانال اقتصاد۳۸ دقیقه پیش

تحلیل کارشناسان درباره تأثیر تصمیم جدید بانک مرکزی بر نرخ ارز و شاخص تورم در ماه‌های آینده.

خنثی

سا

سارا احمدی۲ ساعت پیش

نمودار تغییرات شاخص بورس طی هفته گذشته — رشد قابل توجه در سه روز پایانی.

منفی

چگالی راحت (Reading)

کارت کامل با padding، مدیای inline با نسبت ابعادی حفظ‌شده، متریک‌های کامل، چیپ‌های تگ و وضعیت enrichment. اکشن‌های آیکنی فقط روی هاور نمایش داده می‌شن — کارت مینیمال باقی می‌مونه.

خف

خبرگزاری فارس@farsnews

۳ ساعت پیش·تحلیل۲۱۸ کامنت

گزارشی درباره‌ی وضعیت اکوسیستم استارتاپی کشور و شاخص‌های کلیدی فصل اخیر؛ بررسی روند رشد سرمایه‌گذاری و چالش‌های پیش روی شرکت‌های نوپا در حوزه فناوری.

۴.۱K۲۱۸۶۷۸۴.۵K۳.۴٪

مثبتفارسی

همه نسبت‌های ابعادی (بک‌دراپ بلور)

هر نسبت ابعادی به‌صورت یکنواخت رندر می‌شه. تصویر کامل (object-contain) در مرکز نمایش داده می‌شه و فضای خالی اطراف با همان تصویر بلورشده + scale-110 پر می‌شه. بدون کراپ = بدون از دست رفتن اطلاعات. 9:16 ریل/استوری، 4:5 فید پرتره، 1:1 مربع، 16:9 یوتیوب — همگی در یک کانتینر سازگار.

۱:۱ مربع (فید اینستاگرام)

سا

سارا احمدی@sara.ahmadi

۱۸ دقیقه پیش·تحلیل۱۲۴ کامنت

روزی از جلسه طراحی تیم دیجی‌کالا. از تجربه کاربری تا تست نهایی، همه‌چی با هم. #طراحی #تیم_محصول

۸۷۶۱۲۴۱۲.۴K

مثبت

۴:۵ عمودی (فید پرتره)

سا

سارا احمدی@sara.ahmadi

۱۸ دقیقه پیش

عکس جدیدم با یک برنامه عکاسی حرفه‌ای — فرمت پرتره 4:5 که به‌صورت خودکار در کارت پست با بک‌دراپ بلور نمایش داده می‌شه بدون کراپ. #عکاسی

۸۷۶۱۲۴۱۲.۴K

مثبت

۹:۱۶ ریل/استوری

سا

سارا احمدی@sara.ahmadi

۱۸ دقیقه پیش·تحلیلرونوشت

ریلی که هفته گذشته ضبط کردم و هنوز هم بازخوردها ادامه داره. وقتی کانتینر به پهنا تغییر می‌کنه، ریل مرکزی می‌مونه و فضای اطراف با بلور پر می‌شه. #ریل #سوشال‌مدیا

۱۲.۴K۸۷۶۱۲۴

مثبت

۱۶:۹ یوتیوب

سا

سارا احمدی@sara.ahmadi

۱۸ دقیقه پیش·رونوشت

پشت‌صحنه آخرین ویدیوی بررسی گوشی — چرا اینقدر تأکید روی جزئیات داریم؟ توضیح در ویدیو کامل.

۱۲.۴K۸۷۶۱۲۴

مثبت

انواع بدنه

فقط متن

اگر body.type === 'text'، کارت بدون کانتینر مدیا رندر می‌شه. هشتگ‌ها، منشن‌ها و URL ها خودکار با رنگ برند هایلایت می‌شن.

ویدیو

پوستر ویدیو با overlay دایره‌ای Play + مدت زمان، حتی برای 9:16 و 16:9 به‌صورت letterbox با بک‌دراپ بلور.

ت

تک‌پلاس@TechPlusIR

۳ ساعت پیش·تحلیلرونوشت

۲۰:۳۸

آنباکسینگ و بررسی کامل لپ‌تاپ خریداری‌شده از #دیجی‌کالا — آیا ارزش قیمت را دارد؟

۱۵۶K۸.۹K۱.۲K

مثبت

کاروسل (گالری چندتایی)

چند اسلاید با navigator RTL-آگاه. نسبت ابعادی container بر اساس اسلاید غالب محاسبه می‌شه و همه اسلایدها در همون container ثابت با بک‌دراپ بلور رندر می‌شن.

لم

لایف‌استایل مدرن@lifestyle.modern

۱ ساعت پیش·OCR

Previous slideNext slide

۱ از ۳

محصولاتی که این فصل از #دیجی‌کالا گرفتم 🛍️

۱.۲K۱۸۹۱۸.۹K

مثبت

مدیای دانلودنشده

اگر مدیا موجود بود ولی نتونستیم دانلود/ذخیره کنیم، از body: { type: 'missing-media' } استفاده کنید تا به جای img شکسته، placeholder واضح نمایش داده بشه.

چهار حالت احساس (Sentiment)

positive / negative / neutral / mixed — هرکدام chip خاص خودش رو داره. در حالت راحت کنار نام نویسنده، در حالت فشرده قبل از اکشن‌ها.

وضعیت enrichment + تگ‌های دامنه

پرچم‌های ocr / transcript / aiAnalysis / commentCount در header نمایش داده می‌شن. تگ‌های دامنه (رضایت مشتری، شکایت، …) در فوتر. authorityScore هم در header قابل نمایش است.

مح

مریم حسینی@maryam.h

۱ ساعت پیش·تحلیلOCR۳۸ کامنت

ساعتی که هفته پیش از #دیجی‌کالا گرفتم. کیفیت بسته‌بندی ممتاز و محصول اصل ✨

۴۱۲۳۸۶.۲K

مثبت

۷ پلتفرم پشتیبانی‌شده

نشان پلتفرم (اینستاگرام، توییتر، تلگرام، یوتیوب، تیک‌تاک، لینکدین، ترِدز) به‌صورت نقطه رنگی کوچک روی avatar نویسنده رندر می‌شه.

حالت‌های انتخاب و خوانده‌شده

• read={true} → opacity کاهش یافته (پست قبلاً باز شده)
• selected={true} → پس‌زمینه برند ملایم
• selectable={true} → checkbox برای انتخاب چندتایی

اکشن‌های آیکنی (Icon-only با Tooltip)

اکشن‌های پیش‌فرض همگی به‌صورت آیکن (بدون متن) با Tooltip نمایش داده می‌شن و فقط روی هاور یا فوکوس کارت ظاهر می‌شن:

برای کاستومایز کردن یا حذف/افزودن اکشن، prop actions رو پاس بدید:

import { Bookmark, Flag, Maximize2 } from 'lucide-react'
;<PostCard
  post={post}
  actions={[
    { id: 'details', label: 'باز کردن', icon: Maximize2, onClick: (p) => openModal(p) },
    { id: 'bookmark', label: 'ذخیره', icon: Bookmark, onClick: (p) => saveToBulletin(p) },
    { id: 'flag', label: 'گزارش', icon: Flag, onClick: (p) => report(p), variant: 'danger' },
  ]}
/>

ترکیب با PostList

برای نمایش لیست چندپست با toggle چگالی، keyboard nav (Arrow/j/k)، و انتخاب چندتایی، از PostList استفاده کنید:

سا

سارا احمدی@sara.ahmadi

۸ دقیقه پیش

تجربه خریدم از #دیجی‌کالا واقعاً عالی بود! محصول دقیقاً همان‌طور که توضیح داده شده بود و ظرف ۲۴ ساعت به دستم رسید. #رضایت_مشتری

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

مثبت

عر

علی رضایی@ali_r

۴۱ دقیقه پیش·۸۹ کامنت

سه بار با پشتیبانی تماس گرفتم ولی هنوز مشکل بازگشت کالا حل نشده. خدمات پس از فروش واقعاً افت کرده @DigiKala

۸.۹K۲۳۴۸۹

منفی

کد

کانال دیجی‌مگ@digimag_ir

۱ ساعت پیش

گزارش سه‌ماهه دیجی‌کالا: رشد ۳۴٪ در تراکنش‌های موبایل، افزایش ۱۸٪ در میانگین سبد خرید. مدیرعامل: «هدف تا پایان سال ۵ میلیون کاربر فعال روزانه است.»

۴۵.۲K

خنثی

ت

تک‌پلاس@TechPlusIR

۲ ساعت پیش·تحلیلرونوشت

۲۰:۳۸

آنباکسینگ و بررسی کامل لپ‌تاپ خریداری‌شده از #دیجی‌کالا — آیا ارزش قیمت را دارد؟

۱۵۶K۸.۹K۱.۲K

مثبت

import { PostList, type PostData } from '@parto-system-design/ui'

const [readIds, setReadIds] = React.useState<Set<string>>(new Set())

<PostList
  posts={posts}
  readIds={readIds}
  onOpen={(p) => { setReadIds((s) => new Set([...s, p.id])); open(p) }}
  onOpenDetails={(p) => openDetailsModal(p)}
/>

ترکیب با PostDetailsDrawer

با کلیک روی آیکن Maximize2 (یا هرچیز که به onOpenDetails وصل کردید)، پنل کناری جزئیات باز می‌شه. drawer تب‌های پست، کامنت‌ها، تحلیل هوشمند و متن استخراج‌شده رو نشون می‌ده، و با j/k بین پست‌های فید جابه‌جا می‌شه.

برای API کامل drawer، صفحه PostDetailsDrawer رو ببینید.

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

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

PostCard

PostData

PostAuthor

PostBodyData (Discriminated Union)

PostMediaItem

PostEnrichmentFlags

PostAction

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

• کارت role="button" و tabIndex=0 دارد — با Tab قابل focus است.
• Enter پست را باز می‌کند (onOpen).
• Space وضعیت انتخاب را toggle می‌کند (onSelect وقتی selectable).
• Escape روی کارت اثری ندارد — در PostDetailsDrawer برای بستن drawer استفاده می‌شود.
• Checkbox و اکشن‌های آیکنی همگی aria-label دارند.
• Tooltip زمان مطلق روی timestamp با keyboard focus ظاهر می‌شود.
• اکشن‌های آیکنی فقط روی hover/focus ظاهر می‌شوند اما همیشه در DOM هستند (screen-reader دسترسی دارد).
• در PostList با Arrow Up/Down یا j/k بین کارت‌ها حرکت می‌کنید.

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

• PostList — اگر نیاز به toggle چگالی + keyboard nav + bulk selection دارید.
• PostDetailsDrawer — برای نمایش کامل پست همراه کامنت، تحلیل هوشمند، OCR و متادیتای پلتفرم.
• CommentCard — برای نمایش تحلیل‌شده یک کامنت مستقل با تگ‌های موضوعی.
• SocialPlatformBadge — اگر فقط نشان پلتفرم می‌خواهید بدون ساختار پست.
• EmotionDistribution — توزیع احساسات ۹-کلاسه (داخل PostDetailsDrawer استفاده می‌شود).