Kanban Board

import { useRef, useLayoutEffect } from 'react';
import { KanbanBoard, KanbanBoardRef } from '@timelinekit/react';
import { KanbanColumn, KanbanCard, KanbanSwimlane } from '@timelinekit/core';
import '@timelinekit/core/styles/kb';

export default function App() {
  const ref = useRef<KanbanBoardRef>(null);

  useLayoutEffect(() => {
    if (!ref.current) return;
    const kb = ref.current;

    // Add columns
    const todo = new KanbanColumn(null);
    todo.title = 'To Do';
    const inProgress = new KanbanColumn(null);
    inProgress.title = 'In Progress';
    inProgress.wipLimit = 3;
    const done = new KanbanColumn(null);
    done.title = 'Done';
    done.isTerminal = true;
    kb.data.assignColumns([todo, inProgress, done]);

    // Add cards
    const card1 = new KanbanCard(null, todo.id);
    card1.title = 'Design landing page';
    card1.priority = 'high';
    card1.tags = ['design'];
    const card2 = new KanbanCard(null, inProgress.id);
    card2.title = 'Build REST API';
    card2.priority = 'critical';
    kb.data.assignCards([card1, card2]);
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <KanbanBoard ref={ref} />
    </div>
  );
}