ui-neu/dist/components/listGroup/ListItem.js

Neu UI, a responsive React component library.

import _taggedTemplateLiteral from "/home/runner/work/neu_ui/neu_ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: block;\n  padding: .75rem 1.25rem;\n  border: none;\n  border-bottom: ", ";\n  border-right: ", ";\n  text-align: inherit;\n  background: #edf2f5;\n  cursor: pointer;\n  font-size: 16px;\n  color: #999;\n  &: last-child{\n    border-radius: ", "; \n  }\n  &: first-child {\n    border-radius: ", ";\n  }\n  &:hover {\n    color: rgba(139, 139, 139, 0.788);\n  };\n  &: active {\n    box-shadow: inset -5px -8px 7px 1px rgba(255,255,255,0.5), inset 4px 6px 6px 0px rgba(0,0,0,0.2);\n  };\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: block;\n  padding: .75rem 1.25rem;\n  text-decoration: none;\n  border-bottom: ", ";\n  border-right: ", ";\n  cursor: pointer;\n  color: #999;\n  &: active {\n    box-shadow: inset -5px -8px 7px 1px rgba(255,255,255,0.5), inset 4px 6px 6px 0px rgba(0,0,0,0.2);\n  }\n  &: last-child{\n    border-radius: ", "; \n  }\n  &: first-child {\n    border-radius: ", ";\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: block;\n  padding: .75rem 1.25rem;\n  border-bottom: ", ";\n  border-right: ", ";\n  background-color: ", ";\n  color: ", ";\n  &: last-child{\n    border-radius: ", "; \n  }\n  &: first-child {\n    border-radius: ", ";\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React from 'react';
import styled from "styled-components";
var StyledDiv = styled.div(_templateObject(), function (props) {
  return props.horizontal ? "none" : ".0625rem solid #d1d9e6";
}, function (props) {
  return props.horizontal ? ".0625rem solid #d1d9e6" : "none";
}, function (props) {
  return props.active ? '#999' : '#edf2f5';
}, function (props) {
  return props.disabled ? "#c3c3c3" : props.active ? 'white' : '#999';
}, function (props) {
  return props.horizontal ? "0 0.65rem 0.65rem 0.65rem" : "0 0 0.65rem 0.65rem";
}, function (props) {
  return props.horizontal ? "0.65rem 0 0 0.65rem" : "0.65rem 0.65rem 0 0";
});
var StyledAnchor = styled.a(_templateObject2(), function (props) {
  return props.horizontal ? "none" : ".0625rem solid #d1d9e6";
}, function (props) {
  return props.horizontal ? ".0625rem solid #d1d9e6" : "none";
}, function (props) {
  return props.horizontal ? "0 0.65rem 0.65rem 0.65rem" : "0 0 0.65rem 0.65rem";
}, function (props) {
  return props.horizontal ? "0.65rem 0 0 0.65rem" : "0.65rem 0.65rem 0 0";
});
var StyledButton = styled.button(_templateObject3(), function (props) {
  return props.horizontal ? "none" : ".0625rem solid #d1d9e6";
}, function (props) {
  return props.horizontal ? ".0625rem solid #d1d9e6" : "none";
}, function (props) {
  return props.horizontal ? "0 0.65rem 0.65rem 0.65rem" : "0 0 0.65rem 0.65rem";
}, function (props) {
  return props.horizontal ? "0.65rem 0 0 0.65rem" : "0.65rem 0.65rem 0 0";
});
export var ListItem = function ListItem(_ref) {
  var children = _ref.children,
      active = _ref.active,
      disabled = _ref.disabled,
      type = _ref.type,
      href = _ref.href,
      horizontal = _ref.horizontal;

  switch (type) {
    case 'link':
      return /*#__PURE__*/React.createElement(StyledAnchor, {
        href: href,
        horizontal: horizontal
      }, children);

    case 'button':
      return /*#__PURE__*/React.createElement(StyledButton, {
        horizontal: horizontal
      }, children);

    default:
      return /*#__PURE__*/React.createElement(StyledDiv, {
        active: active,
        disabled: disabled,
        type: type,
        horizontal: horizontal
      }, children);
  }
};