{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-time-picker-13","type":"registry:block","title":"Date and time","description":"Schedule a post with a calendar and time columns side by side in one card.","dependencies":[],"registryDependencies":["button","calendar","card","@reui/time-picker"],"files":[{"path":"c-time-picker-13.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  TimePicker,\n  TimePickerColumns,\n  TimePickerPanel,\n} from \"@/components/reui/time-picker\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\n/* Plain arrays rather than Intl or toLocale*, so the server and the browser\n   always print the same summary. */\nconst WEEKDAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"]\nconst MONTHS = [\n  \"Jan\",\n  \"Feb\",\n  \"Mar\",\n  \"Apr\",\n  \"May\",\n  \"Jun\",\n  \"Jul\",\n  \"Aug\",\n  \"Sep\",\n  \"Oct\",\n  \"Nov\",\n  \"Dec\",\n]\n\n/* Fixed dates, so the server and every visitor render the same month. */\nconst FIRST_MONTH = new Date(2026, 9, 1)\nconst SUGGESTED_DAY = new Date(2026, 9, 14)\n\nexport function Pattern() {\n  const [date, setDate] = useState(SUGGESTED_DAY)\n  const [time, setTime] = useState(\"09:00\")\n  const [scheduled, setScheduled] = useState<string | null>(null)\n\n  const summary = `${WEEKDAYS[date.getDay()]}, ${MONTHS[date.getMonth()]} ${date.getDate()} at ${time}`\n  /* Derived, so changing the day or the time after scheduling reads as a\n     new, unsaved choice again. */\n  const isScheduled = scheduled === summary\n\n  return (\n    <Card className=\"mx-auto w-fit max-w-full\">\n      <CardHeader>\n        <CardTitle>Schedule a post</CardTitle>\n        <CardDescription>\n          Pick the day and the time it goes live.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col items-center gap-4 sm:flex-row sm:items-start\">\n          {/* `required` keeps one day selected, so the summary always has\n              a date to show. */}\n          <Calendar\n            mode=\"single\"\n            required\n            selected={date}\n            onSelect={setDate}\n            defaultMonth={FIRST_MONTH}\n          />\n          <div className=\"flex justify-center self-stretch max-sm:border-t max-sm:pt-4 sm:border-s sm:ps-4\">\n            <TimePicker\n              aria-label=\"Publish time\"\n              value={time}\n              onValueChange={(next) => {\n                /* No footer means no Clear, so `next` is never null here. */\n                if (next) setTime(next)\n              }}\n              minuteStep={15}\n            >\n              <TimePickerPanel className=\"[--time-picker-rows:7]\">\n                {/* No footer: Now would set the time but not the date. */}\n                <TimePickerColumns />\n              </TimePickerPanel>\n            </TimePicker>\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter>\n        <p role=\"status\" className=\"me-3 min-w-0 flex-1 text-sm\">\n          {isScheduled && (\n            <span className=\"text-muted-foreground\">Scheduled for </span>\n          )}\n          <span className=\"font-medium tabular-nums\">{summary}</span>\n        </p>\n        <Button onClick={() => setScheduled(summary)}>Schedule</Button>\n      </CardFooter>\n    </Card>\n  )\n}","target":"components/examples/c-time-picker-13.tsx"}],"meta":{"order":13,"gridSize":1,"label":"Date & Time"}}