Event Calendar

1"use client";
2import React from "react";
3import { motion, AnimatePresence } from "framer-motion";
4import { ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
5import { Button } from "@/components/ui/button";
6import {
7  Dialog,
8  DialogContent,
9  DialogHeader,
10  DialogTitle,
11} from "@/components/ui/dialog";
12import { Input } from "@/components/ui/input";
13import { Label } from "@/components/ui/label";
14import Image from "next/image";
15import { cn } from "@/lib/utils";
16import {
17  add,
18  eachDayOfInterval,
19  endOfMonth,
20  format,
21  isEqual,
22  isSameMonth,
23  isToday,
24  parse,
25  startOfMonth,
26  startOfWeek,
27  endOfWeek,
28} from "date-fns";
29 
30interface Subscription {
31  id: string;
32  name: string;
33  date: number;
34  icon: string;
35  color: string;
36}
37interface SubscriptionDay {
38  date: Date;
39  subscriptions: Subscription[];
40  isCurrentMonth: boolean;
41}
42function EventCalendar() {
43  const [subscriptions, setSubscriptions] = React.useState<Subscription[]>([]);
44  const [currentMonth, setCurrentMonth] = React.useState(
45    format(new Date(), "MMM-yyyy"),
46  );
47  const [isAddModalOpen, setIsAddModalOpen] = React.useState(false);
48  const firstDayCurrentMonth = parse(currentMonth, "MMM-yyyy", new Date());
49  const days = React.useMemo(() => {
50    const start = startOfWeek(startOfMonth(firstDayCurrentMonth));
51    const end = endOfWeek(endOfMonth(firstDayCurrentMonth));
52    return eachDayOfInterval({ start, end }).map(
53      (day): SubscriptionDay => ({
54        date: day,
55        subscriptions: subscriptions.filter(
56          (subscription) => subscription.date === day.getDate(),
57        ),
58        isCurrentMonth: isSameMonth(day, firstDayCurrentMonth),
59      }),
60    );
61  }, [firstDayCurrentMonth, subscriptions]);
62  function previousMonth() {
63    const firstDayNextMonth = add(firstDayCurrentMonth, { months: -1 });
64    setCurrentMonth(format(firstDayNextMonth, "MMM-yyyy"));
65  }
66  function nextMonth() {
67    const firstDayNextMonth = add(firstDayCurrentMonth, { months: 1 });
68    setCurrentMonth(format(firstDayNextMonth, "MMM-yyyy"));
69  }
70  const handleAddSubscription = (newSubscription: Omit<Subscription, "id">) => {
71    const subscription = { ...newSubscription, id: Date.now().toString() };
72    setSubscriptions([...subscriptions, subscription]);
73  };
74  const handleRemoveSubscription = (id: string) => {
75    setSubscriptions(subscriptions.filter((sub) => sub.id !== id));
76  };
77  return (
78    <div className="p-4 mx-auto max-w-3xl">
79// … truncated