"use client"; import { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence, Reorder } from "framer-motion"; import { IconName } from "lucide-react"; import { cn } from "@/lib"; const KanbanBoard = () => { const [newItem, setNewItem] = useState(""); const [newItems, setNewItems] = useState([]); const [inProgressItems, setInProgressItems] = useState([]); const [finishedItems, setFinishedItems] = useState([]); const boardRef = useRef(null); useEffect(() => { const animation = async () => { if (boardRef.current) { await new Promise((resolve) => setTimeout(resolve, 10)); (boardRef.current as any).animate( { transform: ["scale(0.9)", "scale(1)"], opacity: [0, 1], }, { duration: 300, easing: "ease-out", } ); } }; animation(); }, []); const handleCreateItem = () => { if (newItem.trim() !== "") { setNewItems([...newItems, newItem]); setNewItem(""); } }; const handleDragEnd = ( itemId: string, sourceColumn: string, destinationColumn: string ) => { if (sourceColumn === destinationColumn) return; let item: string | undefined; let sourceList: string[] = []; let setSourceList: React.Dispatch> = () => {}; switch (sourceColumn) { case "new": item = newItems.find((item) => item === itemId); sourceList = newItems; setSourceList = setNewItems; break; case "inProgress": item = inProgressItems.find((item) => item === itemId); sourceList = inProgressItems; setSourceList = setInProgressItems; break; case "finished": item = finishedItems.find((item) => item === itemId); sourceList = finishedItems; setSourceList = setFinishedItems; break; default: console.error("Invalid source column:", sourceColumn); return; } if (!item) return; let destinationList: string[] = []; let setDestinationList: React.Dispatch> = () => {}; switch (destinationColumn) { case "new": destinationList = newItems; setDestinationList = setNewItems; break; case "inProgress": destinationList = inProgressItems; setDestinationList = setInProgressItems; break; case "finished": destinationList = finishedItems; setDestinationList = setFinishedItems; break; default: console.error("Invalid destination column:", destinationColumn); return; } const newSourceList = sourceList.filter((i) => i !== itemId); const newDestinationList = [...destinationList, item]; setSourceList(newSourceList); setDestinationList(newDestinationList); }; const handleDeleteFinishedItem = (itemToDelete: string) => { setFinishedItems(finishedItems.filter((item) => item !== itemToDelete)); }; const onDragEndNew = (itemId: string, destinationColumn: string) => { handleDragEnd(itemId, "new", destinationColumn); }; const onDragEndInProgress = (itemId: string, destinationColumn: string) => { handleDragEnd(itemId, "inProgress", destinationColumn); }; const onDragEndFinished = (itemId: string, destinationColumn: string) => { handleDragEnd(itemId, "finished", destinationColumn); }; return (

New

setNewItem(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleCreateItem()} placeholder="Add new item" className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />

{newItems.map((item) => ( { const destination = e.target.closest("[data-column]")?.dataset .column; if (destination) { onDragEndNew(item, destination); } }} className="bg-white p-3 rounded shadow mb-2 cursor-move dark:bg-gray-800 dark:text-gray-200" data-column="new" > {item} ))}

In Progress

{inProgressItems.map((item) => ( { const destination = e.target.closest("[data-column]")?.dataset .column; if (destination) { onDragEndInProgress(item, destination); } }} className="bg-white p-3 rounded shadow mb-2 cursor-move dark:bg-gray-800 dark:text-gray-200" data-column="inProgress" > {item} ))}

Finished

{finishedItems.map((item) => ( { const destination = e.target.closest("[data-column]")?.dataset .column; if (destination) { onDragEndFinished(item, destination); } }} className="bg-white p-3 rounded shadow mb-2 cursor-move dark:bg-gray-800 dark:text-gray-200 flex items-center justify-between" data-column="finished" > {item} ))}

); }; export default KanbanBoard;

Layouts

Kanban Board