"use client"; import { format } from "date-fns"; import { useEffect, useState } from "react"; import type { DayButtonProps } from "react-day-picker"; import { cn } from "@/registry/default/lib/utils"; import { Calendar } from "@/registry/default/ui/calendar"; const GOOD_PRICE_THRESHOLD = 100; export default function Particle() { const today = new Date(); const [date, setDate] = useState(today); const [mockPriceData, setMockPriceData] = useState>( {}, ); useEffect(() => { const generateMockPriceData = () => { const data: Record = {}; const todayDate = new Date(); for (let i = 0; i < 180; i++) { const date = new Date(todayDate); date.setDate(todayDate.getDate() + i); const dateKey = format(date, "yyyy-MM-dd"); const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80; data[dateKey] = randomPrice; } return data; }; setMockPriceData(generateMockPriceData()); }, []); const isDateDisabled = (date: Date) => { return !mockPriceData[format(date, "yyyy-MM-dd")]; }; return ( ( ), }} disabled={isDateDisabled} mode="single" numberOfMonths={2} onSelect={setDate} pagedNavigation selected={date} showOutsideDays={false} /> ); } function DayButton(props: DayButtonProps & { prices: Record }) { const { day, prices, modifiers: _modifiers, ...buttonProps } = props; const price = prices[format(day.date, "yyyy-MM-dd")]; const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD; return ( ); }

Calendar 24

Instalação

Dependências

Registry dependencies