خط زمان

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رویداد پررنگ.