60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { GripVertical, Tickets } from 'lucide-react'
|
|
import { useRef } from 'react'
|
|
import type { ReactNode } from 'react'
|
|
|
|
function KanbanColumn({
|
|
children,
|
|
name,
|
|
itemCount,
|
|
}: {
|
|
children: ReactNode
|
|
name: string
|
|
itemCount: number
|
|
}) {
|
|
const column = useRef<HTMLDivElement>(null)
|
|
|
|
const handleDraggableStart = () => {
|
|
column.current?.setAttribute('draggable', 'true')
|
|
}
|
|
|
|
const handleDraggableStop = () => {
|
|
column.current?.setAttribute('draggable', 'false')
|
|
}
|
|
|
|
const handleDragStart = (e: DragEvent) => {
|
|
e.dataTransfer?.setData('text/custom', 'ASDF')
|
|
}
|
|
|
|
const handleDragStop = () => {
|
|
column.current?.setAttribute('draggable', 'false')
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="min-w-96 bg-accent rounded-md p-4 snap-center"
|
|
ref={column}
|
|
onDragStart={handleDragStart}
|
|
onDragEnd={handleDragStop}
|
|
>
|
|
<div className="flex justify-between mb-2">
|
|
<div className="flex place-items-center">
|
|
<GripVertical
|
|
size={20}
|
|
className="mr-2 cursor-grab"
|
|
onMouseDown={handleDraggableStart}
|
|
onMouseUp={handleDraggableStop}
|
|
/>
|
|
<p>{name}</p>
|
|
</div>
|
|
<div className="flex place-items-center gap-2">
|
|
{itemCount}
|
|
<Tickets size={20} />
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default KanbanColumn
|