{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-calendar-14","type":"registry:block","title":"Preset time selection","description":"Preset time selection","dependencies":["date-fns"],"registryDependencies":["button","calendar","card","scroll-area"],"files":[{"path":"c-calendar-14.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport { format } from \"date-fns\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n\nexport function Pattern() {\n  const today = new Date()\n  const [date, setDate] = useState<Date>(today)\n  const [time, setTime] = useState<string | null>(null)\n\n  // Mock time slots data\n  const timeSlots = [\n    { available: false, time: \"09:00\" },\n    { available: false, time: \"09:30\" },\n    { available: true, time: \"10:00\" },\n    { available: true, time: \"10:30\" },\n    { available: true, time: \"11:00\" },\n    { available: true, time: \"11:30\" },\n    { available: false, time: \"12:00\" },\n    { available: true, time: \"12:30\" },\n    { available: true, time: \"13:00\" },\n    { available: true, time: \"13:30\" },\n    { available: true, time: \"14:00\" },\n    { available: false, time: \"14:30\" },\n    { available: false, time: \"15:00\" },\n    { available: true, time: \"15:30\" },\n    { available: true, time: \"16:00\" },\n    { available: true, time: \"16:30\" },\n    { available: true, time: \"17:00\" },\n    { available: true, time: \"17:30\" },\n  ]\n\n  return (\n    <Card className=\"p-0\">\n      <CardContent className=\"p-0\">\n        <div className=\"flex max-sm:flex-col\">\n          <Calendar\n            disabled={[{ before: today }]}\n            mode=\"single\"\n            onSelect={(newDate) => {\n              if (newDate) {\n                setDate(newDate)\n                setTime(null)\n              }\n            }}\n            selected={date}\n          />\n          <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n            <div className=\"absolute inset-0 py-4 max-sm:border-t\">\n              <ScrollArea className=\"h-full sm:border-s\">\n                <div className=\"space-y-3\">\n                  <div className=\"flex h-5 shrink-0 items-center px-5\">\n                    <p className=\"text-sm font-medium\">\n                      {format(date, \"EEEE, d\")}\n                    </p>\n                  </div>\n                  <div className=\"grid gap-1.5 px-5 max-sm:grid-cols-2\">\n                    {timeSlots.map(({ time: timeSlot, available }) => (\n                      <Button\n                        className=\"w-full\"\n                        disabled={!available}\n                        key={timeSlot}\n                        onClick={() => setTime(timeSlot)}\n                        size=\"sm\"\n                        variant={time === timeSlot ? \"default\" : \"outline\"}\n                      >\n                        {timeSlot}\n                      </Button>\n                    ))}\n                  </div>\n                </div>\n              </ScrollArea>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-calendar-14.tsx"}],"meta":{"order":14}}