{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-10",
  "type": "registry:block",
  "title": "Dialog with Calendar and Time Picker",
  "description": "A dialog with calendar and time picker block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "calendar",
    "dialog",
    "input",
    "label",
    "popover",
    "select",
    "textarea"
  ],
  "dependencies": [
    "date-fns",
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/dialogs/dialog-10.tsx",
      "type": "registry:component",
      "target": "components/dialog-10.tsx",
      "content": "'use client';\n\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\nexport default function Dialog10() {\n  const [open, setOpen] = useState(true);\n  const [date, setDate] = useState<Date | undefined>(new Date());\n  const [startTime, setStartTime] = useState('09:00');\n\n  const timeOptions = useMemo(() => {\n    const options = [];\n    for (let hour = 0; hour <= 23; hour++) {\n      for (let minute = 0; minute < 60; minute += 30) {\n        const formattedHour = hour.toString().padStart(2, '0');\n        const formattedMinute = minute.toString().padStart(2, '0');\n        const value = `${formattedHour}:${formattedMinute}`;\n        const tempDate = new Date(2000, 0, 1, hour, minute);\n        const label = format(tempDate, 'h:mm a');\n        options.push({ value, label });\n      }\n    }\n\n    if (!options.find((opt) => opt.value === '23:59')) {\n      const endOfDay = new Date(2000, 0, 1, 23, 59);\n      options.push({ value: '23:59', label: format(endOfDay, 'h:mm a') });\n    }\n\n    return options;\n  }, []);\n\n  return (\n    <Dialog onOpenChange={setOpen} open={open}>\n      <DialogTrigger render={<Button />}>Show dialog</DialogTrigger>\n      <DialogContent className=\"gap-0 p-0 sm:max-w-lg\">\n        <DialogHeader className=\"border-b px-6 py-4 pt-5\">\n          <DialogTitle>Schedule a Meeting</DialogTitle>\n        </DialogHeader>\n\n        <form action=\"#\" method=\"POST\">\n          <div className=\"space-y-6 p-6\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"title\">Meeting Title</Label>\n              <Input\n                id=\"title\"\n                name=\"title\"\n                placeholder=\"e.g., Project Kickoff\"\n              />\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"attendees\">Attendees</Label>\n              <Input\n                id=\"attendees\"\n                name=\"attendees\"\n                placeholder=\"user1@example.com, user2@example.com\"\n              />\n              <p className=\"text-pretty text-muted-foreground text-xs\">\n                Enter email addresses separated by commas.\n              </p>\n            </div>\n\n            <div className=\"grid grid-cols-3 gap-4\">\n              <div className=\"col-span-2 space-y-2\">\n                <Label htmlFor=\"date\">Date</Label>\n                <Popover>\n                  <PopoverTrigger\n                    render={\n                      <Button\n                        className={cn(\n                          'w-full justify-start text-left font-normal',\n                          !date && 'text-muted-foreground'\n                        )}\n                        id=\"date\"\n                        variant={'outline'}\n                      />\n                    }\n                  >\n                    <CalendarIcon className=\"mr-1 h-4 w-4 shrink-0\" />{' '}\n                    {date ? format(date, 'PPP') : <span>Pick a date</span>}\n                  </PopoverTrigger>\n                  <PopoverContent align=\"start\" className=\"w-auto p-0\">\n                    <Calendar\n                      autoFocus\n                      mode=\"single\"\n                      onSelect={setDate}\n                      selected={date}\n                    />\n                  </PopoverContent>\n                </Popover>\n              </div>\n\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"time\">Time</Label>\n                <Select\n                  items={timeOptions}\n                  onValueChange={(value) => {\n                    if (value) {\n                      setStartTime(value);\n                    }\n                  }}\n                  value={startTime}\n                >\n                  <SelectTrigger className=\"w-full\" id=\"time\">\n                    <SelectValue placeholder=\"Select time\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {timeOptions.map((option) => (\n                      <SelectItem key={option.value} value={option.value}>\n                        {option.label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"location\">Location / Conference Link</Label>\n              <Input\n                id=\"location\"\n                name=\"location\"\n                placeholder=\"e.g., Conference Room B or https://meet.example.com/...\"\n              />\n            </div>\n\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"description\">Description</Label>\n              <Textarea\n                className=\"min-h-[100px]\"\n                id=\"description\"\n                name=\"description\"\n                placeholder=\"Optional: Add an agenda or notes...\"\n              />\n            </div>\n          </div>\n\n          <div className=\"flex items-center justify-end space-x-2 border-t p-4\">\n            <DialogClose render={<Button type=\"button\" variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button size=\"sm\" type=\"submit\">\n              Schedule\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
    }
  ],
  "categories": [
    "dialogs"
  ]
}