feat: Timeline UI (#2830)

web/src/components/Timeline/TimelineBlocks.tsx

@@ -0,0 +1,47 @@
+import { h } from 'preact';
+import { useMemo } from 'preact/hooks';
+import { findLargestYOffsetInBlocks, getTimelineWidthFromBlocks } from '../../utils/Timeline/timelineEventUtils';
+import { convertRemToPixels } from '../../utils/windowUtils';
+import { TimelineBlockView } from './TimelineBlockView';
+import { TimelineEventBlock } from './TimelineEventBlock';
+
+interface TimelineBlocksProps {
+  timeline: TimelineEventBlock[];
+  firstBlockOffset: number;
+  onEventClick: (block: TimelineEventBlock) => void;
+}
+
+export const TimelineBlocks = ({ timeline, firstBlockOffset, onEventClick }: TimelineBlocksProps) => {
+  const timelineEventBlocks = useMemo(() => {
+    if (timeline.length > 0 && firstBlockOffset) {
+      const largestYOffsetInBlocks = findLargestYOffsetInBlocks(timeline);
+      const timelineContainerHeight = largestYOffsetInBlocks + convertRemToPixels(1);
+      const timelineContainerWidth = getTimelineWidthFromBlocks(timeline, firstBlockOffset);
+      const timelineBlockOffset = (timelineContainerHeight - largestYOffsetInBlocks) / 2;
+      return (
+        <div
+          className='relative'
+          style={{
+            height: `${timelineContainerHeight}px`,
+            width: `${timelineContainerWidth}px`,
+            background: "url('/marker.png')",
+            backgroundPosition: 'center',
+            backgroundSize: '30px',
+            backgroundRepeat: 'repeat',
+          }}
+        >
+          {timeline.map((block) => {
+            const onClickHandler = (block: TimelineEventBlock) => onEventClick(block);
+            const updatedBlock: TimelineEventBlock = {
+              ...block,
+              yOffset: block.yOffset + timelineBlockOffset,
+            };
+            return <TimelineBlockView block={updatedBlock} onClick={onClickHandler} />;
+          })}
+        </div>
+      );
+    }
+  }, [timeline, onEventClick, firstBlockOffset]);
+
+  return timelineEventBlocks;
+};