@geezee/react-ui/esm/user/user.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React from 'react';
import Avatar from '../avatar';
import useTheme from '../styles/use-theme';
var defaultProps = {
  className: ''
};

var User = function User(_ref) {
  var src = _ref.src,
      text = _ref.text,
      name = _ref.name,
      children = _ref.children,
      className = _ref.className,
      altText = _ref.altText,
      props = _objectWithoutProperties(_ref, ["src", "text", "name", "children", "className", "altText"]);

  var theme = useTheme();
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["1618945517", [theme.layout.gapHalf, theme.layout.gapHalf, theme.palette.accents_8, theme.palette.accents_6]]]) + " " + (props && props.className != null && props.className || "user ".concat(className))
  }), /*#__PURE__*/React.createElement(Avatar, {
    src: src,
    text: text,
    size: 32,
    alt: altText
  }), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1618945517", [theme.layout.gapHalf, theme.layout.gapHalf, theme.palette.accents_8, theme.palette.accents_6]]]) + " " + "names"
  }, /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1618945517", [theme.layout.gapHalf, theme.layout.gapHalf, theme.palette.accents_8, theme.palette.accents_6]]]) + " " + "name"
  }, name), /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1618945517", [theme.layout.gapHalf, theme.layout.gapHalf, theme.palette.accents_8, theme.palette.accents_6]]]) + " " + "social"
  }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1618945517",
    dynamic: [theme.layout.gapHalf, theme.layout.gapHalf, theme.palette.accents_8, theme.palette.accents_6]
  }, ".user.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:0 ".concat(theme.layout.gapHalf, ";-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;}.names.__jsx-style-dynamic-selector{margin-left:").concat(theme.layout.gapHalf, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;}.name.__jsx-style-dynamic-selector{font-size:0.89rem;color:").concat(theme.palette.accents_8, ";line-height:1.1rem;text-transform:capitalize;font-weight:500;max-width:15rem;text-overflow:ellipsis;overflow:hidden;}.social.__jsx-style-dynamic-selector{font-size:0.75rem;color:").concat(theme.palette.accents_6, ";}.social.__jsx-style-dynamic-selector *:first-child{margin-top:0;}.social.__jsx-style-dynamic-selector *:last-child{margin-bottom:0;}")));
};

User.defaultProps = defaultProps;
export default React.memo(User);