@krowdy-ui/views/esm/SampleBar/LineVert.js

React components that implement Google's Material Design.

import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core';
var useStyles = makeStyles(function (theme) {
  return {
    bar: {
      backgroundColor: 'white',
      height: 12,
      top: 0,
      width: 2
    },
    root: {
      left: function left(_ref) {
        var leftPercent = _ref.leftPercent;
        return "".concat(leftPercent, "%");
      },
      position: 'absolute'
    },
    rootLabel: {
      bottom: -theme.spacing(3),
      color: theme.palette.grey[600],
      fontSize: 12,
      left: function left(_ref2) {
        var leftPercent = _ref2.leftPercent;
        return "calc(".concat(leftPercent, "% - 4px)");
      }
    }
  };
});

var LineVert = function LineVert(_ref3) {
  var _ref3$leftPercent = _ref3.leftPercent,
      leftPercent = _ref3$leftPercent === void 0 ? 0 : _ref3$leftPercent,
      index = _ref3.index,
      customLabel = _ref3.customLabel;
  var classes = useStyles({
    leftPercent: leftPercent
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.root, classes.bar)
  }), /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.root, classes.rootLabel)
  }, customLabel ? customLabel(index) : index));
};

export default LineVert;