خط زمان

timelineکامپوننت

رویدادها با تاریخ شمسی، خط در سمت راست.

  1. سفارش تحویل شد

    ۲۸ شهریور ۱۴۰۵

  2. بسته ارسال شد

    ۲۶ شهریور ۱۴۰۵

    پست پیشتاز، کد رهگیری پیامک شد

  3. پرداخت تأیید شد

    ۲۵ شهریور ۱۴۰۵

نصب

  1. با CLI

    اگر هنوز init نکرده‌اید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور قطعه و وابستگی‌هایش را می‌نویسد.

    $ npx vibefarsi add timeline
  2. نصب دستی

    محتوای تب «کد» را در 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 به شمسی تبدیل می‌شود.
activeIndexnumber0رویداد پررنگ.