@monolith-forensics/monolith-ui 1.0.0

package/src/Timeline.js

@@ -0,0 +1,153 @@
+import { useTheme } from "@mui/material";
+import moment from "moment";
+import styled from "@emotion/styled";
+import ItemChip from "../../../../components/ItemChip";
+import OpenInFullOutlinedIcon from "@mui/icons-material/OpenInFullOutlined";
+
+const placeHolderData = [
+  {
+    id: 1,
+    title: "Intake",
+    timestamp: "2021-01-01T12:05:22.000Z",
+    description: "This is the description of the acquisition",
+    tag: "acquisition",
+    color: "#FF0000",
+  },
+  {
+    id: 2,
+    title: "Move",
+    timestamp: "2021-01-01T14:05:22.000Z",
+    description: "This is the description of the acquisition",
+    tag: "acquisition",
+    color: "#FF0000",
+  },
+  {
+    id: 3,
+    title: "Release",
+    timestamp: "2021-01-01T18:05:22.000Z",
+    description: "This is the description of the acquisition",
+    tag: "acquisition",
+    color: "#FF0000",
+  },
+];
+
+const Timeline = styled(({ className, data = placeHolderData }) => {
+  return (
+    <>
+      <div className={className}>
+        {data.map((item, index) => {
+          const isLastItem = index === data.length - 1;
+          return (
+            <TimelineItem key={item.id} data={item} showLine={!isLastItem} />
+          );
+        })}
+      </div>
+    </>
+  );
+})``;
+
+const TimelineItem = styled(({ className, data, showLine = true }) => {
+  const theme = useTheme();
+  return (
+    <div className={className}>
+      <div className={"timeline-item-spine"}>
+        <Node icon={data.icon} />
+        {showLine && <Line />}
+      </div>
+      <div className={"timeline-item-content"}>
+        {data.title && (
+          <div className={"timeline-item-content-title"}>{data.title}</div>
+        )}
+        {data.description && (
+          <div className={"timeline-item-content-description"}>
+            {data.description}
+          </div>
+        )}
+        {data.timestamp && (
+          <div className={"timeline-item-content-timestamp"}>
+            <ItemChip
+              text={moment(data.timestamp).format("MMM DD, YYYY hh:mm A")}
+              style={{ backgroundColor: theme.palette.action.hover }}
+            />
+          </div>
+        )}
+        {data.detailsComponent && data.detailsComponent}
+      </div>
+    </div>
+  );
+})`
+  display: flex;
+  .timeline-item-content {
+    margin-left: 20px;
+    .timeline-item-content-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: ${(props) => props.theme.palette.text.primary};
+    }
+    .timeline-item-content-description {
+      margin-bottom: 10px;
+      color: ${(props) => props.theme.palette.text.secondary};
+    }
+    .timeline-item-content-timestamp {
+      margin-bottom: 10px;
+      color: ${(props) => props.theme.palette.divider};
+    }
+  }
+  .timeline-item-spine {
+    // outline: 1px solid ${(props) => props.theme.palette.divider};
+    width: 20px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+const Node = styled(
+  ({
+    className,
+    icon = <OpenInFullOutlinedIcon style={{ fontSize: 12 }} />,
+  }) => {
+    return (
+      <div className={className}>
+        <div className="node-bullet">
+          <div className="node-bullet-icon">{icon}</div>
+        </div>
+      </div>
+    );
+  }
+)`
+  .node-bullet {
+    position: relative;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background-color: ${(props) => props.theme.palette.primary.main};
+    // margin: 0 auto;
+    //   margin-bottom: 20px;
+  }
+  .node-bullet-icon {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    // transform: translate(-50%, -50%);
+    color: ${(props) => props.theme.palette.primary.contrastText};
+  }
+`;
+
+const Line = styled(({ className }) => {
+  return <div className={className}></div>;
+})`
+  width: 1px;
+  height: 100px;
+  //   border-radius: 50%;
+  background-color: ${(props) => props.theme.palette.primary.main};
+  //   margin: 0 auto;
+  //   margin-bottom: 20px;
+`;
+
+const NodeContent = styled(({ className }) => {})``;
+
+export default Timeline;