{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-page",
  "title": "Calendar page",
  "description": "A single-date calendar paired with the selected day's session list, in one studio-schedule card.",
  "registryDependencies": [
    "card",
    "calendar",
    "badge",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/calendar-page.tsx",
      "content": "'use client'\nimport { useState } from 'react'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\nimport { Calendar } from '@/components/ui/calendar'\nimport { Badge } from '@/components/ui/badge'\nimport { Separator } from '@/components/ui/separator'\n\nconst sessions = [\n  { time: '9:00', title: 'Design review', kind: 'Internal' },\n  { time: '11:30', title: 'Token sync with Northwind', kind: 'Call' },\n  { time: '15:00', title: 'Working session', kind: 'Workshop' },\n]\n\n/** A single-date calendar paired with the selected day's session list, in one studio-schedule card. */\nexport function CalendarPage() {\n  const [date, setDate] = useState<Date | undefined>(new Date(2026, 6, 14))\n  return (\n    <Card className=\"w-fit\">\n      <CardHeader>\n        <CardTitle>Week ahead</CardTitle>\n        <CardDescription>Pick a day to see its sessions.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex items-start gap-6 max-md:flex-col\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          defaultMonth={new Date(2026, 6)}\n          className=\"rounded-lg border border-border\"\n        />\n        <div className=\"flex w-[240px] flex-col gap-3\">\n          <span className=\"text-sm font-medium text-foreground\">Tuesday, July 14</span>\n          <Separator />\n          <ul className=\"flex flex-col gap-3\">\n            {sessions.map((s) => (\n              <li key={s.time} className=\"flex items-start gap-3\">\n                <span className=\"w-11 shrink-0 pt-0.5 text-xs font-medium text-muted-foreground\">\n                  {s.time}\n                </span>\n                <div className=\"flex flex-col items-start gap-1\">\n                  <span className=\"text-sm font-medium text-foreground\">{s.title}</span>\n                  <Badge variant=\"outline\">{s.kind}</Badge>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/calendar-page.tsx"
    }
  ],
  "meta": {
    "intent": [
      "scheduling"
    ],
    "use_when": "You need to pick a single date and show what's scheduled that day.",
    "not_for": "the user is booking a span of days, not viewing what's scheduled on one → calendar-range; you want a chronological history of past events, not a schedule of upcoming sessions tied to a picked date → activity-feed"
  },
  "docs": "A single-date calendar paired with the selected day's session list, in one studio-schedule card. Do: Keep the session list in sync with whatever date is selected in the calendar — the two panes are one control, not two independent widgets. Don't: Let the calendar selection and the listed sessions fall out of sync (e.g. a static list that ignores the picked date). Use calendar-range when the user is booking a span of days, not viewing what's scheduled on one. Use activity-feed when you want a chronological history of past events, not a schedule of upcoming sessions tied to a picked date.",
  "categories": [
    "scheduling"
  ],
  "type": "registry:block"
}