پرتوپرتو

پست اینستاگرام

کامپوننت نمایش پست اینستاگرام با دو حالت عمودی و افقی

معرفی

کامپوننت InstagramPost برای نمایش پست‌های اینستاگرام با دو حالت مختلف استفاده می‌شود:

  • حالت عمودی (Vertical): طراحی کاملاً مشابه اپ اینستاگرام که همیشه در حالت LTR نمایش داده می‌شود
  • حالت افقی (Horizontal): یک کارت افقی که برای نمایش در لیست‌ها و صفحات مناسب است

استفاده

حالت عمودی (Vertical)

P
partodata
Parto Data
Post media
123.5Klikes
1.2Kcomments
56.8Kviews
890shares

این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت. این متن می‌تواند تا 2200 کاراکتر باشد.

۲ ساعت پیش

حالت افقی (Horizontal)

Post media
P
partodata
Parto Data
123.5Klikes
1.2Kcomments
56.8Kviews
890shares

این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت. این متن می‌تواند تا 2200 کاراکتر باشد و شامل هشتگ‌ها و منشن‌های مختلف است.

۲ ساعت پیش
import { InstagramPost } from '@parto/ui';

// حالت عمودی
<InstagramPost
  variant="vertical"
  media={[
    {
      type: 'image',
      url: '/path/to/image.jpg',
      aspectRatio: '1:1',
    },
  ]}
  caption="این یک پست نمونه است با #هشتگ و @منشن"
  profile={{
    username: 'partodata',
    fullName: 'Parto Data',
  }}
  stats={{
    likes: 123456,
    comments: 1234,
    views: 56789,
    shares: 890,
  }}
  publishTime={new Date()}
/>

// حالت افقی
<InstagramPost
  variant="horizontal"
  media={[
    {
      type: 'image',
      url: '/path/to/image.jpg',
      aspectRatio: '1:1',
    },
  ]}
  caption="این یک پست نمونه است با #هشتگ و @منشن"
  profile={{
    username: 'partodata',
    fullName: 'Parto Data',
  }}
  stats={{
    likes: 123456,
    comments: 1234,
  }}
  publishTime={new Date()}
/>

Playground

در playground زیر می‌توانید هر دو حالت را مشاهده کرده و تنظیمات مختلف را تست کنید:

حالت عمودی (Vertical)

P
partodata
Parto Data

No media available

123,456likes
1,234comments
56,789views
890shares

این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت. این متن می‌تواند تا 2200 کاراکتر باشد و شامل هشتگ‌ها و منشن‌های مختلف است.

۲ ساعت پیش

حالت افقی (Horizontal)

No media available

P
partodata
Parto Data
123,456likes
1,234comments
56,789views
890shares

این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت. این متن می‌تواند تا 2200 کاراکتر باشد و شامل هشتگ‌ها و منشن‌های مختلف است.

۲ ساعت پیش

تنظیمات اصلی

تنظیمات آمار و زمان

دکمه‌ها فقط هنگام hover نمایش داده می‌شوند

انواع مدیا

تصویر واحد

<InstagramPost
  variant="vertical"
  media={[
    {
      type: 'image',
      url: '/instagram-posts/images/image 1x1.png',
      aspectRatio: '1:1',
    },
  ]}
  caption="پست با تصویر مربعی"
/>

ویدیو

<InstagramPost
  variant="vertical"
  media={[
    {
      type: 'video',
      url: '/instagram-posts/videos/video 16x9.mp4',
      aspectRatio: '16:9',
    },
  ]}
  caption="پست با ویدیو"
/>

کاروسل

<InstagramPost
  variant="vertical"
  media={[
    {
      type: 'image',
      url: '/instagram-posts/images/image 1x1.png',
      aspectRatio: '1:1',
    },
    {
      type: 'image',
      url: '/instagram-posts/images/image 9x16.png',
      aspectRatio: '9:16',
    },
    {
      type: 'video',
      url: '/instagram-posts/videos/video 16x9.mp4',
      aspectRatio: '16:9',
    },
  ]}
  mediaType="carousel"
  caption="پست با کاروسل"
/>

بدون مدیا (Placeholder)

<InstagramPost
  variant="vertical"
  caption="پست بدون مدیا"
  placeholderText="No media available"
/>

کپشن

کپشن می‌تواند شامل هشتگ‌ها و منشن‌ها باشد که به صورت خودکار پارس و استایل می‌شوند:

<InstagramPost
  variant="vertical"
  caption="این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت"
  media={[...]}
/>
  • در حالت عمودی: کپشن به صورت پیش‌فرض کوتاه می‌شود و با کلیک روی "more" می‌توان آن را کامل مشاهده کرد
  • در حالت افقی: کپشن به صورت خودکار به 4 خط محدود می‌شود

آمار پست

<InstagramPost
  variant="vertical"
  stats={{
    likes: 123456,
    comments: 1234,
    views: 56789,
    shares: 890,
  }}
  numberFormat="short" // یا 'exact'
  showLikes={true}
  showComments={true}
  showViews={true}
  showShares={true}
/>

فرمت عدد

  • exact: نمایش دقیق با جداکننده (مثل 123,456)
  • short: نمایش کوتاه اینستاگرامی (مثل 123K, 2.4M)

زمان انتشار

<InstagramPost
  variant="vertical"
  publishTime={new Date(Date.now() - 2 * 60 * 60 * 1000)} // 2 hours ago
  timeFormat="relative" // یا 'absolute'
/>
  • relative: نمایش نسبی (مثل "2 hours ago") با نمایش دقیق در hover
  • absolute: نمایش تاریخ کامل (مثل "Jan 15, 2024 at 3:30 PM")

دکمه‌های اکشن

دکمه‌های اکشن فقط هنگام hover روی کارت نمایش داده می‌شوند و هر کدام tooltip فارسی دارند:

<InstagramPost
  variant="vertical"
  showActions={true}
  onCommentAnalyzer={() => console.log('Comment Analyzer')}
  onBooster={() => console.log('Booster')}
  onAIAnalysis={() => console.log('AI Analysis')}
  onOpenInstagram={() => window.open('https://instagram.com/...')}
  instagramUrl="https://instagram.com/p/..."
/>

تفاوت‌های حالت عمودی و افقی

حالت عمودی (Vertical)

  • طراحی مشابه اپ اینستاگرام
  • همیشه LTR (حتی در محیط RTL)
  • عرض محدود (max-w-sm)
  • کپشن با قابلیت expand/collapse
  • مناسب برای نمایش جزئیات کامل پست

حالت افقی (Horizontal)

  • کارت افقی با عرض کامل
  • ارتفاع محدود (حدود 4 خط کپشن)
  • عکس در سمت راست (حدود 20% عرض)
  • محتوای دیگر در سمت چپ
  • کپشن به 4 خط محدود می‌شود
  • مناسب برای نمایش در لیست‌ها

Props

PropTypeDefaultتوضیحات
variant'vertical' | 'horizontal''vertical'نوع نمایش
mediaMediaItem[]-آرایه‌ای از مدیاها
mediaType'image' | 'video' | 'carousel'-نوع مدیا (اختیاری)
captionstring-متن کپشن
showCaptionbooleantrueنمایش کپشن
statsPostStats-آمار پست
numberFormat'exact' | 'short''exact'فرمت عدد
showLikesbooleantrueنمایش لایک
showCommentsbooleantrueنمایش کامنت
showViewsbooleantrueنمایش بازدید
showSharesbooleantrueنمایش اشتراک
publishTimeDate | string | number-زمان انتشار
timeFormat'absolute' | 'relative''relative'فرمت زمان
profileProfileInfo-اطلاعات پروفایل
showProfilebooleantrueنمایش پروفایل
showActionsbooleantrueنمایش دکمه‌های اکشن
onCommentAnalyzer() => void-callback برای Comment Analyzer
onBooster() => void-callback برای Booster
onAIAnalysis() => void-callback برای AI Analysis
onOpenInstagram() => void-callback برای باز کردن در اینستاگرام
instagramUrlstring-لینک پست در اینستاگرام
placeholderTextstring-متن placeholder برای حالت بدون مدیا

Types

interface MediaItem {
  type: 'image' | 'video'
  url: string
  aspectRatio?: '16:9' | '9:16' | '1:1' | '4:5' | '5:4'
}

interface PostStats {
  likes?: number
  comments?: number
  views?: number
  shares?: number
}

interface ProfileInfo {
  username: string
  fullName?: string
  profilePicture?: string
}

ویژگی‌ها

  • دو حالت نمایش: عمودی و افقی
  • پشتیبانی از انواع مدیا (تصویر، ویدیو، کاروسل)
  • پارس خودکار هشتگ‌ها و منشن‌ها
  • قابلیت expand/collapse برای کپشن (در حالت عمودی)
  • فرمت‌بندی عدد و زمان قابل تنظیم
  • دکمه‌های اکشن با tooltip فارسی
  • Responsive و سازگار با موبایل
  • Accessibility با ARIA labels
  • RTL/LTR support