@atlaskit/breadcrumbs/dist/es2019/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 */
import "./breadcrumbs-skeleton-item.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import Skeleton from '@atlaskit/skeleton';
import { useBreadcrumbsSkeleton } from './internal/use-breadcrumbs-skeleton';
const styles = {
  item: "_1e0c1txw _4cvr1h6o _vchhusvi _4t3i1k8s _p12f1osq",
  iconWrapper: "_1e0c116y _4cvr1h6o _1bah1h6o _1bsb1tcg _4t3i1tcg _12l2v77o"
};
const unboundedStyles = {
  item: "_1758v77o _z9kiu2gc _f42wftgi _rfr7idpf _nqnu1rpy _8bo21n76 _n2r11h6o"
};

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