@redocly/theme
Version:
Shared UI components lib
80 lines • 3.4 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogEntitiesEmptyState = CatalogEntitiesEmptyState;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const HexagonIcon_1 = require("../../icons/HexagonIcon/HexagonIcon");
const getEmptyStateContent = (listType) => {
switch (listType) {
case 'team':
return {
header: 'No team members yet',
paragraph1: 'Your team members will appear here',
paragraph2: "once they've been added to the team.",
};
case 'api-operation':
return {
header: 'No operations yet',
paragraph1: 'Your operations will appear here',
paragraph2: "once they've been added to the API description.",
};
case 'data-schema':
return {
header: 'No schemas yet',
paragraph1: 'Your schemas will appear here',
paragraph2: "once they've been added to the API description.",
};
default:
return {
header: 'No entities found',
paragraph1: 'Try adjusting your search criteria or',
paragraph2: 'check back later for new additions.',
};
}
};
function CatalogEntitiesEmptyState({ listType = 'default', }) {
const { header, paragraph1, paragraph2 } = getEmptyStateContent(listType);
return (react_1.default.createElement(EmptyStateWrapper, { "data-component-name": "Catalog/CatalogEntitiesEmptyState" },
react_1.default.createElement(EmptyStateIconWrapper, null,
react_1.default.createElement(HexagonIcon_1.HexagonIcon, { size: "21px", color: "var(--color-warm-grey-7)" })),
react_1.default.createElement(EmptyStateHeader, null, header),
react_1.default.createElement(EmptyStateText, null, paragraph1),
react_1.default.createElement(EmptyStateText, null, paragraph2)));
}
const EmptyStateWrapper = styled_components_1.default.div `
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--catalog-empty-state-padding);
text-align: center;
min-height: var(--catalog-empty-state-min-height);
`;
const EmptyStateIconWrapper = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-warm-grey-2);
width: 40px;
height: 40px;
border-radius: 50%;
margin-bottom: var(--spacing-xxs);
`;
const EmptyStateHeader = styled_components_1.default.p `
color: var(--catalog-empty-state-header-text-color);
font-size: var(--catalog-empty-state-header-font-size);
font-weight: var(--catalog-empty-state-header-font-weight);
line-height: var(--catalog-empty-state-header-line-height);
margin: 0;
`;
const EmptyStateText = styled_components_1.default.p `
color: var(--catalog-empty-state-text-color);
font-size: var(--catalog-empty-state-font-size);
font-weight: var(--catalog-empty-state-font-weight);
line-height: var(--catalog-empty-state-line-height);
margin: 0;
`;
//# sourceMappingURL=CatalogEntitiesEmptyState.js.map