انتخاب نوبت
slot-pickerکامپوننت تقویمنوار روزها با جمعه‌ها و تعطیلات غیرفعال و دلیلشون، و زیرش ساعت‌های خالی همون روز در سه دسته‌ی صبح، بعدازظهر و عصر، با ظرفیت باقی‌مانده.
صبح
بعدازظهر
عصر
۹ وقت خالی در ۱۸ مهر
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add slot-pickerنصب دستی
محتوای تب «کد» را در
components/calendar/slot-picker.tsxبگذارید. پیش‌نیاز: calendar-core.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { SlotPicker } from "@/components/calendar/slot-picker"23<SlotPicker4 value={slot}5 onChange={setSlot}6 duration={45}7 hours={{ 0: [["09:00", "13:00"], ["16:00", "20:00"]], 5: [["09:00", "13:00"]] }}8 busy={(key) => bookedIntervals[key] ?? []}9/>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| value / onChange | { start, end } | null | - | نوبت انتخاب‌شده به‌صورت دو لحظه‌ی واقعی. |
| hours | [from, to][] | Record<weekday, [from, to][]> | - | ساعت کاری برای همه‌ی روزها یا برای هر روز هفته جدا. |
| duration / step | number | 30 | مدت هر نوبت و فاصله‌ی شروع نوبت‌ها به دقیقه. |
| capacity | number | 1 | بیشتر از یک یعنی چند نفر هم‌زمان، و تعداد جای خالی نشون داده میشه. |
| busy | { start, end }[] | (key) => … | - | بازه‌های رزروشده. هر هم‌پوشانی یک جا را پر می‌کنه. |
| closedWeekdays / closeOnHolidays / closedDays | … | [6] / true / [] | روزهای بسته که در نوار غیرفعال میشن. |
| closedReason | (date) => string | null | - | دلیل خودتون برای بسته بودن یک روز، مثلاً «دکتر سه‌شنبه‌ها نیستن». null یعنی قاعده‌های بالا تصمیم بگیرن. |
نکته‌ها
- ساعت‌های گذشته و پرشده پنهان نمیشن و خط‌خورده می‌مونن تا کاربر بدونه چرا انتخاب نمیشن.