وایب‌فارسیUI

سرفصل دوره

course-outlineکامپوننت

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

۳ فصل۹ درس۲ ساعت و ۱ دقیقه۴ از ۹ درس دیده‌شده

نصب

  1. با CLI

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

    $ npx vibefarsi add course-outline

  2. نصب دستی

    محتوای تب «کد» را در components/ui/course-outline.tsx بگذارید.

    $ npm i lucide-react
    کپی کل فایلregistry json

استفاده

usage.tsx
1import { CourseOutline } from "@/components/ui/course-outline"23<CourseOutline4  currentId="l3"5  onSelect={(lesson) => router.push(`/learn/${lesson.id}`)}6  sections={[7    {8      id: "s1", title: "شروع کار",9      lessons: [10        { id: "l1", title: "معرفی دوره", kind: "video", minutes: 6, done: true, preview: true },11        { id: "l2", title: "نصب ابزارها", kind: "reading", minutes: 10, done: true },12        { id: "l3", title: "اولین پروژه", kind: "video", minutes: 18 },13        { id: "l4", title: "آزمونک فصل اول", kind: "quiz", minutes: 5 },14      ],15    },16    { id: "s2", title: "مسیرها", lessons: [{ id: "l5", title: "صفحه‌ی داینامیک", minutes: 22, locked: true }] },17  ]}18/>

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
sections{ id; title; lessons: OutlineLesson[] }[]-فصل‌ها و درس‌ها.
OutlineLesson{ id; title; kind?; minutes?; done?; locked?; preview? }-kind یکی از video | reading | quiz | assignment است.
currentIdstring-درس در حال پخش؛ با نوار brand در ابتدای ردیف مشخص میشه و فصلش باز می‌مونه.
onSelect(lesson) => void-کلیک روی درس. درس قفل (بدون preview) غیرفعال است.
defaultOpenstring[]-فصل‌های باز در شروع؛ پیش‌فرض فصل درس جاری.
showSummarybooleantrueردیف «۴ فصل · ۱۲ درس · ۳ ساعت و ۱۵ دقیقه».

نکته‌های راست‌چین

  • مدت کل با formatMinutes به «۳ ساعت و ۱۵ دقیقه» تبدیل میشه؛ همین تابع export شده.
  • پنل بسته inert است تا Tab روی درس‌های پنهان نره.
قبلیپخش‌کننده ویدئوبعدیدرس‌نامه