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

این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت. این متن میتواند تا 2200 کاراکتر باشد.
حالت افقی (Horizontal)

این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت. این متن میتواند تا 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)
No media available
این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت. این متن میتواند تا 2200 کاراکتر باشد و شامل هشتگها و منشنهای مختلف است.
حالت افقی (Horizontal)
No media available
این یک پست نمونه است با #هشتگ و @منشن برای تست کامپوننت. این متن میتواند تا 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
| Prop | Type | Default | توضیحات |
|---|---|---|---|
variant | 'vertical' | 'horizontal' | 'vertical' | نوع نمایش |
media | MediaItem[] | - | آرایهای از مدیاها |
mediaType | 'image' | 'video' | 'carousel' | - | نوع مدیا (اختیاری) |
caption | string | - | متن کپشن |
showCaption | boolean | true | نمایش کپشن |
stats | PostStats | - | آمار پست |
numberFormat | 'exact' | 'short' | 'exact' | فرمت عدد |
showLikes | boolean | true | نمایش لایک |
showComments | boolean | true | نمایش کامنت |
showViews | boolean | true | نمایش بازدید |
showShares | boolean | true | نمایش اشتراک |
publishTime | Date | string | number | - | زمان انتشار |
timeFormat | 'absolute' | 'relative' | 'relative' | فرمت زمان |
profile | ProfileInfo | - | اطلاعات پروفایل |
showProfile | boolean | true | نمایش پروفایل |
showActions | boolean | true | نمایش دکمههای اکشن |
onCommentAnalyzer | () => void | - | callback برای Comment Analyzer |
onBooster | () => void | - | callback برای Booster |
onAIAnalysis | () => void | - | callback برای AI Analysis |
onOpenInstagram | () => void | - | callback برای باز کردن در اینستاگرام |
instagramUrl | string | - | لینک پست در اینستاگرام |
placeholderText | string | - | متن 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