Bulk commit: November work

src/features/Kanban/components/KanbanColumn.tsx

@@ -0,0 +1,59 @@
+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