"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Check, Plus, Sparkles, CheckCircle2, Calendar } from "lucide-react"; const CONFETTI_COLORS = ["#10b981", "#3b82f6", "#f59e0b", "#ec4899", "#8b5cf6"]; interface Particle { id: number; x: number; y: number; color: string; rotation: number; scale: number; delay: number; } const ConfettiExplosion = ({ isVisible }: { isVisible: boolean }) => { const [particles, setParticles] = useState([]); useEffect(() => { if (isVisible) { const newParticles = Array.from({ length: 60 }).map((_, i) => ({ id: i, x: (Math.random() - 0.5) * 500, y: (Math.random() - 1) * 500 - 100, color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)], rotation: Math.random() * 360, scale: Math.random() * 0.6 + 0.4, delay: Math.random() * 0.2, })); setParticles(newParticles); } else { setParticles([]); } }, [isVisible]); if (!isVisible) return null; return (

{particles.map((p) => ( ))}

); }; export default function InboxZeroConfettiState() { const [pendingTasks, setPendingTasks] = useState(1); const [showConfetti, setShowConfetti] = useState(false); const completeTask = () => { setPendingTasks(0); setShowConfetti(true); setTimeout(() => setShowConfetti(false), 3000); }; const addNewTask = () => { setPendingTasks(1); setShowConfetti(false); }; return (

{pendingTasks > 0 ? (

Pending Operations

Review System Logs

High priority • Due today

) : (

Inbox Zero Achieved

Outstanding work! You have successfully resolved all pending actions in this sector. Take a breath, or initiate a new workflow.

Create New Task Celebrate Again

)}

); }