@wulperstudio/cms/organisms/TimeLineV2/TimeLineV2.js

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import { v4 } from 'uuid';
import { Icon } from '@iconify/react';
import { Typography, useTheme } from '@mui/material';
import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator } from '@mui/lab';
import { Entry } from '../../components';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var TimeLineV2 = function TimeLineV2(_ref) {
  var items = _ref.items,
    timeLineProps = _ref.timeLineProps,
    EntryProps = _ref.EntryProps;
  var theme = useTheme();
  var _React$useState = React.useState([]),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    data = _React$useState2[0],
    setData = _React$useState2[1];
  React.useEffect(function () {
    setData(items);
  }, [items]);
  return /*#__PURE__*/_jsxs(Timeline, Object.assign({
    sx: {
      padding: 0,
      margin: 0
    }
  }, timeLineProps, {
    children: [data.map(function (_ref2) {
      var timeLineContent = _ref2.timeLineContent,
        timeLineSeparator = _ref2.timeLineSeparator;
      return /*#__PURE__*/_jsxs(TimelineItem, {
        sx: {
          '&::before': {
            content: 'none'
          }
        },
        children: [/*#__PURE__*/_jsxs(TimelineSeparator, {
          children: [/*#__PURE__*/_jsx(TimelineDot, Object.assign({
            sx: {
              p: '6px'
            }
          }, timeLineSeparator.timelineDotProps, {
            children: /*#__PURE__*/_jsx(Icon, {
              icon: timeLineSeparator.icon,
              color: timeLineSeparator.colorIcon
            })
          })), /*#__PURE__*/_jsx(TimelineConnector, Object.assign({
            sx: {
              backgroundColor: theme.palette.background.paper
            }
          }, timeLineSeparator.timelineConnectorProps))]
        }), /*#__PURE__*/_jsxs(TimelineContent, {
          sx: {
            py: '12px',
            px: 2
          },
          children: [timeLineContent.date && /*#__PURE__*/_jsx(Typography, {
            variant: "body2",
            component: "span",
            color: "text.secondary",
            children: timeLineContent.date
          }), timeLineContent.content]
        })]
      }, v4());
    }), /*#__PURE__*/_jsx(Entry, Object.assign({}, EntryProps))]
  }));
};