FrontEnd/src/app/views/timeline-common/TimelineLine.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import clsx from "clsx";
import React from "react";

export interface TimelineLineProps {
  current?: boolean;
  startSegmentLength?: string | number;
  center: "node" | null;
  className?: string;
  style?: React.CSSProperties;
}

const TimelineLine: React.FC<TimelineLineProps> = ({
  startSegmentLength,
  center,
  current,
  className,
  style,
}) => {
  return (
    <div className={clsx("timeline-line", className)} style={style}>
      <div className="segment start" style={{ height: startSegmentLength }} />
      {center == "node" ? (
        <div className="node-container">
          <div className="node"></div>
        </div>
      ) : null}
      <div className="segment end"></div>
      {current && <div className="segment current-end" />}
    </div>
  );
};

export default TimelineLine;