@atlaskit/breadcrumbs/dist/cjs/components/breadcrumbs-skeleton-item.js

Breadcrumbs are a navigation system used to show a user's location in a site or app.

/* breadcrumbs-skeleton-item.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BreadcrumbsSkeletonItem;
require("./breadcrumbs-skeleton-item.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireDefault(require("react"));
var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
var _useBreadcrumbsSkeleton = require("./internal/use-breadcrumbs-skeleton");
var styles = {
  item: "_1e0c1txw _4cvr1h6o _vchhusvi _4t3i1k8s _p12f1osq",
  iconWrapper: "_1e0c116y _4cvr1h6o _1bah1h6o _1bsb1tcg _4t3i1tcg _12l2v77o"
};
var unboundedStyles = {
  item: "_1758v77o _z9kiu2gc _f42wftgi _rfr7idpf _nqnu1rpy _8bo21n76 _n2r11h6o"
};

/**
 * __BreadcrumbsSkeletonItem__
 *
 * A placeholder skeleton item for use inside `BreadcrumbsSkeleton`.
 */
function BreadcrumbsSkeletonItem(_ref) {
  var hasIcon = _ref.hasIcon,
    width = _ref.width;
  var _useBreadcrumbsSkelet = (0, _useBreadcrumbsSkeleton.useBreadcrumbsSkeleton)(),
    isShimmering = _useBreadcrumbsSkelet.isShimmering,
    size = _useBreadcrumbsSkelet.size;
  return /*#__PURE__*/_react.default.createElement("li", {
    className: (0, _runtime.ax)([styles.item, unboundedStyles.item])
  }, hasIcon ? /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _runtime.ax)([styles.iconWrapper])
  }, /*#__PURE__*/_react.default.createElement(_skeleton.default, {
    height: 16,
    isShimmering: isShimmering,
    width: 16
  })) : null, /*#__PURE__*/_react.default.createElement(_skeleton.default, {
    height: size === 'small' ? 12 : 14,
    isShimmering: isShimmering,
    width: width
  }));
}