"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, Plus, Clock, MapPin, Users } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem } from "@/lib/animations" const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] const monthDays = Array.from({ length: 30 }, (_, i) => i + 1) const events = [ { id: 1, day: 12, title: "Sprint Planning", time: "10:00 AM - 11:30 AM", type: "meeting", location: "Conference Room A" }, { id: 2, day: 12, title: "Lunch with Team", time: "12:00 PM - 1:00 PM", type: "social", location: "Cafeteria" }, { id: 3, day: 13, title: "Code Review Session", time: "2:00 PM - 3:00 PM", type: "meeting", location: "Zoom" }, { id: 4, day: 15, title: "1:1 with Manager", time: "9:30 AM - 10:00 AM", type: "meeting", location: "Office B" }, { id: 5, day: 18, title: "Team Offsite", time: "All day", type: "event", location: "Downtown" }, { id: 6, day: 22, title: "Project Deadline", time: "5:00 PM", type: "deadline", location: "-" }, ] const eventColors: Record = { meeting: "border-l-primary bg-primary/5", social: "border-l-amber-500 bg-amber-500/5", event: "border-l-emerald-500 bg-emerald-500/5", deadline: "border-l-red-500 bg-red-500/5", } export default function Calendar() { const [selectedDay, setSelectedDay] = useState(12) const [showCreate, setShowCreate] = useState(false) const dayEvents = events.filter((e) => e.day === selectedDay) return (

Calendar

Manage your schedule and events.

June 2026

{weekDays.map((d) => (

{d}

))} {Array.from({ length: 3 }).map((_, i) => (

))} {monthDays.map((day) => { const hasEvents = events.some((e) => e.day === day) return ( ) })}

June {selectedDay}, 2026 {dayEvents.length} event{dayEvents.length !== 1 ? "s" : ""} {dayEvents.map((event) => (

{event.title}

{event.time}

{event.location}

))} {dayEvents.length === 0 && (

No events this day.

)}

{showCreate && ( Create Event Add a new event to the calendar.

Title

Date

Type

)}

) }