Gantt Chart

import { useRef, useCallback } from 'react';
import { GanttChart, GanttChartRef } from '@timelinekit/react';
import '@timelinekit/core/styles';

function day(offset: number) {
  const d = new Date();
  d.setDate(d.getDate() + offset);
  d.setHours(0, 0, 0, 0);
  return d;
}

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

  const handleReady = useCallback(() => {
    const gantt = ref.current;
    if (!gantt) return;
    const list = gantt.list;
    list.clear();

    const t1 = list.createTask('1');
    t1.name = 'Planning';
    t1.startTime = day(1);
    t1.endTime = day(4);
    list.addTask(t1);

    const t2 = list.createTask('2');
    t2.name = 'Development';
    t2.startTime = day(7);
    t2.endTime = day(18);
    list.addTask(t2);

    const t3 = list.createTask('3');
    t3.name = 'Testing';
    t3.startTime = day(21);
    t3.endTime = day(25);
    list.addTask(t3);

    list.addLink(t1, t2, 'finishToStart');
    list.addLink(t2, t3, 'finishToStart');
  }, []);

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