"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

export interface KanbanCard {
  id: string
  title: string
  description?: string
  tag?: string
}

export interface KanbanColumnProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  title: string
  cards: KanbanCard[]
  columnId?: string
  cardCount?: number
  onCardsChange?: (cards: KanbanCard[]) => void
  onCardClick?: (card: KanbanCard) => void
  renderCard?: (card: KanbanCard, isDragging: boolean) => React.ReactNode
  emptyMessage?: string
  onAddCard?: () => void
  addLabel?: string
  showAddButton?: boolean
}

function DragHandle() {
  return (
    <span
      className="inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground cursor-grab active:cursor-grabbing"
      aria-hidden="true"
    >
      <svg
        viewBox="0 0 24 24"
        className="h-4 w-4"
        fill="currentColor"
        aria-hidden="true"
      >
        <circle cx="8" cy="6" r="1.5" />
        <circle cx="16" cy="6" r="1.5" />
        <circle cx="8" cy="12" r="1.5" />
        <circle cx="16" cy="12" r="1.5" />
        <circle cx="8" cy="18" r="1.5" />
        <circle cx="16" cy="18" r="1.5" />
      </svg>
    </span>
  )
}

function AddIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <path d="M12 5v14" />
      <path d="M5 12h14" />
    </svg>
  )
}

function moveItem<T>(list: T[], fromIndex: number, toIndex: number): T[] {
  if (fromIndex === toIndex) return list
  const next = [...list]
  const [moved] = next.splice(fromIndex, 1)
  next.splice(toIndex, 0, moved)
  return next
}

function KanbanColumn({
  title,
  cards: initialCards,
  columnId,
  cardCount,
  onCardsChange,
  onCardClick,
  renderCard,
  emptyMessage = "No cards",
  onAddCard,
  addLabel = "Add",
  showAddButton = true,
  className,
  ...props
}: KanbanColumnProps) {
  const [cards, setCards] = React.useState<KanbanCard[]>(initialCards)
  const [draggingId, setDraggingId] = React.useState<string | null>(null)
  const [overId, setOverId] = React.useState<string | null>(null)

  React.useEffect(() => {
    setCards(initialCards)
  }, [initialCards])

  const draggingIdRef = React.useRef<string | null>(null)

  React.useEffect(() => {
    draggingIdRef.current = draggingId
  }, [draggingId])

  const commitReorder = (targetId: string) => {
    const activeId = draggingIdRef.current
    if (!activeId || activeId === targetId) return

    const fromIndex = cards.findIndex((c) => c.id === activeId)
    const toIndex = cards.findIndex((c) => c.id === targetId)

    if (fromIndex === -1 || toIndex === -1) return

    const reordered = moveItem(cards, fromIndex, toIndex)
    setCards(reordered)
    onCardsChange?.(reordered)
  }

  const handleDragStart = (id: string) => (event: React.DragEvent) => {
    setDraggingId(id)
    setOverId(id)
    draggingIdRef.current = id
    event.dataTransfer.effectAllowed = "move"
    event.dataTransfer.setData("text/plain", id)
  }

  const handleDragOver = (id: string) => (event: React.DragEvent) => {
    event.preventDefault()
    if (draggingId && id !== overId) {
      setOverId(id)
    }
  }

  const handleDrop = (id: string) => (event: React.DragEvent) => {
    event.preventDefault()
    commitReorder(id)
    setDraggingId(null)
    setOverId(null)
  }

  const handleDragEnd = () => {
    setDraggingId(null)
    setOverId(null)
  }

  const displayCount = cardCount ?? cards.length

  return (
    <div
      className={cn(
        "flex h-fit w-72 flex-col rounded-xl border border-border bg-card",
        className
      )}
      data-column-id={columnId}
      {...props}
    >
      <div className="flex items-center justify-between border-b border-border px-4 py-3">
        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
        <div className="flex items-center gap-2">
          <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
            {displayCount}
          </span>
          {showAddButton ? (
            <button
              type="button"
              onClick={onAddCard}
              disabled={!onAddCard}
              className="inline-flex items-center gap-1.5 rounded-full border border-border bg-muted px-2.5 py-1 text-xs font-semibold text-foreground transition hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
            >
              <AddIcon className="h-3.5 w-3.5" />
              <span>{addLabel}</span>
            </button>
          ) : null}
        </div>
      </div>

      <div className="flex flex-col gap-2 p-3" role="list">
        {cards.length === 0 ? (
          <p className="py-6 text-center text-sm text-muted-foreground">
            {emptyMessage}
          </p>
        ) : (
          cards.map((card) => {
            const isDragging = draggingId === card.id
            const isOver = Boolean(draggingId && overId === card.id && draggingId !== card.id)

            return (
              <React.Fragment key={card.id}>
                {isOver && (
                  <div className="h-16 rounded-lg border border-dashed border-border bg-muted" />
                )}
                <div
                  role="listitem"
                  draggable
                  onDragStart={handleDragStart(card.id)}
                  onDragOver={handleDragOver(card.id)}
                  onDrop={handleDrop(card.id)}
                  onDragEnd={handleDragEnd}
                  onClick={() => onCardClick?.(card)}
                  onKeyDown={(event) => {
                    if (event.key === "Enter" || event.key === " ") {
                      event.preventDefault()
                      onCardClick?.(card)
                    }
                  }}
                  tabIndex={0}
                  aria-grabbed={isDragging}
                  className={cn(
                    "rounded-lg border border-border bg-background p-3 text-sm shadow-sm transition",
                    isDragging ? "opacity-50 bg-muted" : "hover:bg-muted",
                    onCardClick ? "cursor-pointer" : ""
                  )}
                >
                  {renderCard ? (
                    renderCard(card, isDragging)
                  ) : (
                    <div className="flex items-start gap-2">
                      <DragHandle />
                      <div className="flex-1 space-y-1">
                        <p className="font-medium text-foreground">{card.title}</p>
                        {card.description && (
                          <p className="text-xs text-muted-foreground">
                            {card.description}
                          </p>
                        )}
                        {card.tag && (
                          <span className="inline-block rounded-full border border-border bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
                            {card.tag}
                          </span>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              </React.Fragment>
            )
          })
        )}
      </div>
    </div>
  )
}

export { KanbanColumn }
Kanban Column

To Do

Dependencies

Files

Installation
