Calendar

1"use client";
2 
3import { Clock, MapPin } from "@phosphor-icons/react";
4import * as React from "react";
5import { Badge } from "@/components/ui/badge";
6import { Button } from "@/components/ui/button";
7import { Calendar } from "@/components/ui/calendar";
8import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
9import { ScrollArea } from "@/components/ui/scroll-area";
10 
11const initialEvents = [
12  {
13    id: 1,
14    title: "Team Meeting",
15    time: "10:00 AM",
16    location: "Conference Room A",
17    date: new Date(),
18  },
19  {
20    id: 2,
21    title: "Client Call",
22    time: "2:00 PM",
23    location: "Zoom",
24    date: new Date(),
25  },
26  {
27    id: 3,
28    title: "Project Review",
29    time: "4:00 PM",
30    location: "Office",
31    date: new Date(),
32  },
33];
34 
35export function CalendarBlock() {
36  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(new Date());
37  const [events, setEvents] = React.useState(initialEvents);
38  const nextId = React.useRef(initialEvents.length + 1);
39 
40  const isSameDay = (a?: Date, b?: Date) => !!a && !!b && a.toDateString() === b.toDateString();
41  const dayEvents = events.filter((event) => isSameDay(event.date, selectedDate));
42  const dateLabel = selectedDate
43    ? selectedDate.toLocaleDateString(undefined, {
44        weekday: "long",
45        month: "long",
46        day: "numeric",
47      })
48    : "Select a date";
49 
50  const addEvent = () => {
51    if (!selectedDate) return;
52    const id = nextId.current++;
53    setEvents((prev) => [
54      ...prev,
55      {
56        id,
57        title: `New Event ${id}`,
58        time: "12:00 PM",
59        location: "TBD",
60        date: selectedDate,
61      },
62    ]);
63  };
64 
65  return (
66    <div className="p-6 space-y-6">
67      <div className="flex items-center justify-between">
68        <div>
69          <h2 className="text-3xl font-bold text-foreground">Calendar</h2>
70          <p className="text-muted-foreground">Manage your schedule and events</p>
71        </div>
72        <Button className="text-foreground" onClick={addEvent} disabled={!selectedDate}>
73          New Event
74        </Button>
75      </div>
76 
77      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
78        <Card className="lg:col-span-2 text-foreground">
79          <CardHeader>
80            <CardTitle className="text-foreground">Calendar View</CardTitle>
81            <CardDescription className="text-muted-foreground">Select a date to view events</CardDescription>
82          </CardHeader>
83          <CardContent>
84// … truncated