@cimpress/react-components/dist/src/Carousel/CarouselLoading.js

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const Spinner_1 = require("../Spinner");
const colors_1 = require("../colors");
const getSpinnerSizeString = (spinnerSize) => spinnerSize >= 72 ? 'large' : spinnerSize >= 38 ? 'medium' : 'small';
const itemActiveCss = (0, css_1.css) `
  transform: translate3d(0, 0, 0);
  left: 0;
`;
const CarouselLoading = ({ size }) => {
    const spinnerSize = size / 3;
    return (react_1.default.createElement("div", { className: itemActiveCss, style: {
            backgroundColor: colors_1.silver,
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        } },
        react_1.default.createElement("div", { style: { height: spinnerSize } },
            react_1.default.createElement(Spinner_1.Spinner, { size: getSpinnerSizeString(spinnerSize) }))));
};
exports.default = CarouselLoading;
//# sourceMappingURL=CarouselLoading.js.map