Calendar 1

1'use client'
2 
3import { useMemo, useState } from 'react'
4import { ChevronLeft, ChevronRight, Plus } from 'lucide-react'
5import { Button } from '@/components/ui/button'
6import { calendarEvents, categoryToken, type EventCategory } from "@/components/data/calendar-1-data"
7import { Calendar1EventDialog } from './calendar-1-event-dialog'
8import { Calendar1MonthGrid } from './calendar-1-month-grid'
9 
10const monthFormat = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' })
11 
12const startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate())
13 
14const addDays = (date: Date, days: number) => {
15  const next = new Date(date)
16  next.setDate(next.getDate() + days)
17  return next
18}
19 
20/** Weeks start on Monday, which is what most of the world outside the US expects. */
21function monthGrid(anchor: Date) {
22  const first = new Date(anchor.getFullYear(), anchor.getMonth(), 1)
23  const offset = (first.getDay() + 6) % 7
24  const start = addDays(first, -offset)
25 
26  return Array.from({ length: 42 }, (_, index) => addDays(start, index))
27}
28 
29export function Calendar1() {
30  const today = useMemo(() => startOfDay(new Date()), [])
31  const [anchor, setAnchor] = useState(() => new Date(today.getFullYear(), today.getMonth(), 1))
32  const [creating, setCreating] = useState<Date | null>(null)
33 
34  const events = useMemo(
35    () =>
36      calendarEvents.map(event => ({
37        ...event,
38        date: addDays(today, event.dayOffset),
39      })),
40    [today],
41  )
42 
43  const days = useMemo(() => monthGrid(anchor), [anchor])
44 
45  return (
46    <div className='w-full p-4 sm:p-6'>
47      <div className='mx-auto max-w-5xl'>
48        <div className='flex flex-wrap items-center justify-between gap-3'>
49          <div className='flex items-center gap-2'>
50            <h1 className='text-2xl font-semibold tracking-tight'>{monthFormat.format(anchor)}</h1>
51          </div>
52 
53          <div className='flex items-center gap-2'>
54            <Button
55              variant='outline'
56              size='icon'
57              aria-label='Previous month'
58              onClick={() => setAnchor(new Date(anchor.getFullYear(), anchor.getMonth() - 1, 1))}
59            >
60              <ChevronLeft className='size-4' />
61            </Button>
62            <Button variant='outline' onClick={() => setAnchor(new Date(today.getFullYear(), today.getMonth(), 1))}>
63              Today
64            </Button>
65            <Button
66              variant='outline'
67              size='icon'
68// … truncated