خط زمان
timelineکامپوننتخط زمان رویدادها با تاریخ شمسی و خطی که در سمت راست قرار میگیره.
سفارش تحویل شد
۲۹ مهر ۱۴۰۵
بسته ارسال شد
۲۷ مهر ۱۴۰۵
پست پیشتاز، کد رهگیری پیامک شد
پرداخت تأیید شد
۲۶ مهر ۱۴۰۵
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add timelineنصب دستی
محتوای تب «کد» را در
components/ui/timeline.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Timeline } from "@/components/ui/timeline"23<Timeline items={[{ date: new Date(), title: "سفارش تحویل شد" }, { date: "۲۳ شهریور", title: "بسته ارسال شد" }]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| items | { date: Date | string; title; description? }[] | - | Date به شمسی تبدیل میشه. |
| activeIndex | number | 0 | رویداد پررنگ. |