From 12e12dff4fb83e125a47b62a2c4be335363de089 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 13 Jan 2021 14:13:02 +0800
Subject: ...

---
 .../src/app/views/timeline-common/TimelineLine.tsx | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 FrontEnd/src/app/views/timeline-common/TimelineLine.tsx

(limited to 'FrontEnd/src/app/views/timeline-common/TimelineLine.tsx')

diff --git a/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx
new file mode 100644
index 00000000..fd7dde0a
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline-common/TimelineLine.tsx
@@ -0,0 +1,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;
-- 
cgit v1.2.3