PodcastEpisodeCard — کارت اپیزود با کاور

برای شبکهٔ اپیزودها و «آخرین اپیزود» در صفحهٔ خانه. شمارهٔ قسمت روی کاور می‌نشیند و دکمهٔ پخش در پانویس است. دکمه بالاتر از لینک کشیده قرار دارد و جدا کلیک می‌شود. الگو به هیچ پخش‌کننده‌ای وابسته نیست و پخش را با و به پخش‌کنندهٔ محصول وصل می‌کنید (مثلاً پخش‌کنندهٔ سراسری داک). برای صفحهٔ کامل برنامه با فهرست اپیزودها و صف پخش از الگوی Podcast استفاده کنید.

وضعیت: beta · لایه: ۴ () · کد: · Storybook:

TSX

import { PodcastEpisodeCard } from '@tokapps/patterns';

نمونهٔ زنده

patterns/podcast-episode-card

قسمت ۱۲

از ایده تا اولین کاربر

گفت‌وگو با سازندگان سه استارتاپ ایرانی دربارهٔ ساخت نسخهٔ اول و پیدا کردن صد کاربر نخست.

۱۹ مهر ۱۴۰۵۴۷ دقیقه

قسمت ۱۳

طراحی سیستم برای تیم‌های کوچک

کِی دیزاین سیستم بسازیم و کِی یک کیت ساده کافی است.

۲۶ مهر ۱۴۰۵۱ ساعت و ۵ دقیقه

کد قابل کپی

پایه: بدون دکمهٔ پخش

TSX

import { PodcastEpisodeCard } from '@tokapps/patterns';<PodcastEpisodeCard  title="از ایده تا اولین کاربر"  href="/podcasts/idea-to-first-user"  description="گفت‌وگو با سازندگان سه استارتاپ ایرانی دربارهٔ ساخت نسخهٔ اول و پیدا کردن صد کاربر نخست."  episode={12}  tone="series-1"  date="۱۹ مهر ۱۴۰۵"  dateTime="2026-10-11"  duration={2820}/>

با پخش و مکث

TSX

import { useState } from 'react';import { PodcastEpisodeCard } from '@tokapps/patterns';function Episode() {  const [playing, setPlaying] = useState(false);  return (    <PodcastEpisodeCard      title="طراحی سیستم برای تیم‌های کوچک"      href="/podcasts/design-systems-small-teams"      description="کِی دیزاین سیستم بسازیم و کِی یک کیت ساده کافی است."      episode={13}      tone="series-6"      date="۲۶ مهر ۱۴۰۵"      dateTime="2026-10-18"      duration={3900}      playing={playing}      onPlay={() => setPlaying((p) => !p)}    />  );}

با تصویر کاور

TSX

<PodcastEpisodeCard title="…" href="/podcasts/x" episode={14} cover="/covers/ep-14.webp" />

همهٔ پیکربندی‌ها

پراپ	نوع	پیش‌فرض	توضیح
		—	عنوان و نام لینک.
		—	صفحهٔ اپیزود؛ لینک کشیده.
		—	خلاصه؛ حداکثر دو خط.
		—	«قسمت ۱۲» روی کاور.
	· …		فام کاور.
		—	تصویر کاور.
/		—	تاریخ نمایشی و ISO.
	(ثانیه)	—	«۴۷ دقیقه»، «۱ ساعت و ۵ دقیقه».
		—	بدون آن دکمهٔ پخش نیست.
			آیکون و متن «مکث» و .
	· ·		سطح عنوان.

تابع کمکی همان متن مدت را برمی‌گرداند.

حالت‌ها

پیش‌فرض · در حال پخش (، آیکون مکث، ) · hover · focus-visible · با تصویر · کنتراست بالا (کاور تخت) · چاپ (دکمهٔ پخش پنهان).

RTL، کیبورد و صفحه‌خوان

: لینک عنوان، سپس دکمهٔ پخش. / روی دکمه پخش و مکث می‌کند.
نام دکمه با متن دیدنی شروع می‌شود: «پخش «عنوان»».
حالت پخش با آیکون، متن و نشان داده می‌شود، نه فقط با رنگ.

قرارداد ARCH

کاور از می‌آید (تنها استثنای گرادیان)؛ الگو گرادیان یا رنگ خام ندارد.
صدا ندارد؛ پخش صوت مسئولیت پخش‌کنندهٔ محصول است و autoplay ممنوع است (فقط با کلیک کاربر).