"use client"; import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib"; import { FiChevronLeft, FiChevronRight, FiClock } from "react-icons/fi"; interface CalendarProps { showClock?: boolean; } const Calendar: React.FC = ({ showClock = false }) => { const [currentDate, setCurrentDate] = useState(new Date()); const [isAnimating, setIsAnimating] = useState(false); const [currentTime, setCurrentTime] = useState(new Date()); useEffect(() => { if (showClock) { const intervalId = setInterval(() => { setCurrentTime(new Date()); }, 1000); return () => clearInterval(intervalId); } }, [showClock]); const getDaysInMonth = (date: Date): number => { const year = date.getFullYear(); const month = date.getMonth(); return new Date(year, month + 1, 0).getDate(); }; const getFirstDayOfMonth = (date: Date): number => { const year = date.getFullYear(); const month = date.getMonth(); return new Date(year, month, 1).getDay(); }; const goToPreviousMonth = () => { setIsAnimating(true); setTimeout(() => { setCurrentDate((prevDate) => { const newDate = new Date(prevDate); newDate.setMonth(prevDate.getMonth() - 1); return newDate; }); setIsAnimating(false); }, 200); }; const goToNextMonth = () => { setIsAnimating(true); setTimeout(() => { setCurrentDate((prevDate) => { const newDate = new Date(prevDate); newDate.setMonth(prevDate.getMonth() + 1); return newDate; }); setIsAnimating(false); }, 200); }; const daysInMonth = getDaysInMonth(currentDate); const firstDayOfMonth = getFirstDayOfMonth(currentDate); const days: (number | null)[] = Array(firstDayOfMonth).fill(null); for (let i = 1; i <= daysInMonth; i++) { days.push(i); } const monthName = currentDate.toLocaleString("default", { month: "long" }); const year = currentDate.getFullYear(); const calendarVariants = { initial: { opacity: 0, x: isAnimating ? (currentDate.getMonth() > new Date().getMonth() ? 50 : -50) : 0 }, animate: { opacity: 1, x: 0, transition: { duration: 0.3 } }, exit: { opacity: 0, x: isAnimating ? (currentDate.getMonth() > new Date().getMonth() ? -50 : 50) : 0, transition: { duration: 0.3 } }, }; return (

{monthName} {year}

{showClock && (

{currentTime.toLocaleTimeString()}

)}

{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (

{day}

))} {days.map((day, index) => (

{day}

))}

); }; export default Calendar;

Calendar

Animated Calendar