@atlaskit/atlassian-navigation/dist/esm/components/Create/skeleton.js

A horizontal navigation component for Atlassian products.

import _defineProperty from "@babel/runtime/helpers/defineProperty";
/** @jsx jsx */
import { Fragment } from 'react';
import { css, jsx } from '@emotion/react';
import { CREATE_BREAKPOINT, gridSize } from '../../common/constants';
import { useTheme } from '../../theme';
import { IconButtonSkeleton } from '../IconButton/skeleton';
var buttonHeight = gridSize * 4;
var skeletonStyles = css({
  width: 68,
  height: buttonHeight,
  marginLeft: 12,
  borderRadius: 3,
  opacity: 0.15
});
var mobileStyles = css(_defineProperty({}, "@media (max-width: ".concat(CREATE_BREAKPOINT - 1, "px)"), {
  display: 'none !important'
}));

// Not exported to consumers, only used in NavigationSkeleton
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export var CreateSkeleton = function CreateSkeleton() {
  var theme = useTheme();
  return jsx(Fragment, null, jsx("div", {
    style: theme.mode.skeleton,
    css: [skeletonStyles, mobileStyles]
  }), jsx(IconButtonSkeleton, {
    css: mobileStyles,
    size: gridSize * 3.25
  }));
};