+ "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n const today = new Date();\n const [date, setDate] = useState<Date | undefined>(today);\n\n const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n {},\n );\n useEffect(() => {\n const generateMockPriceData = () => {\n const data: Record<string, number> = {};\n const todayDate = new Date();\n\n for (let i = 0; i < 180; i++) {\n const date = new Date(todayDate);\n date.setDate(todayDate.getDate() + i);\n const dateKey = format(date, \"yyyy-MM-dd\");\n const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n data[dateKey] = randomPrice;\n }\n return data;\n };\n setMockPriceData(generateMockPriceData());\n }, []);\n\n const isDateDisabled = (date: Date) => {\n return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n };\n\n return (\n <Calendar\n classNames={{\n day_button: \"size-12\",\n month:\n \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n months: \"sm:flex-col md:flex-row gap-8\",\n today: \"*:after:hidden\",\n weekday: \"w-12\",\n }}\n components={{\n DayButton: (props: DayButtonProps) => (\n <DayButton {...props} prices={mockPriceData} />\n ),\n }}\n disabled={isDateDisabled}\n mode=\"single\"\n numberOfMonths={2}\n onSelect={setDate}\n pagedNavigation\n selected={date}\n showOutsideDays={false}\n />\n );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n const { day, prices, modifiers, ...buttonProps } = props;\n const price = prices[format(day.date, \"yyyy-MM-dd\")];\n const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n return (\n <button {...buttonProps}>\n <span className=\"flex flex-col\">\n {props.children}\n {price && (\n <span\n className={cn(\n \"font-normal text-xs\",\n isGoodPrice\n ? \"text-emerald-500\"\n : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n )}\n >\n ${price}\n </span>\n )}\n </span>\n </button>\n );\n}\n",
0 commit comments