@octopusdeploy/design-system-components
Version:
The design systems component library.
31 lines (30 loc) • 1.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.EmptyStateNoResults = EmptyStateNoResults;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const NoSearchResultsIllustration_1 = require("../../Illustrations/NoSearchResultsIllustration");
function EmptyStateNoResults() {
return ((0, jsx_runtime_1.jsxs)("div", { className: emptyStateNoResultsStyles.root, children: [(0, jsx_runtime_1.jsx)(NoSearchResultsIllustration_1.NoSearchResultsIllustration, {}), (0, jsx_runtime_1.jsx)("h2", { className: emptyStateNoResultsStyles.heading, children: "No results found." }), (0, jsx_runtime_1.jsx)("p", { className: emptyStateNoResultsStyles.description, children: "Try adjusting your filters or search term." })] }));
}
const emptyStateNoResultsStyles = {
root: (0, css_1.css)({
padding: design_system_tokens_1.space[48],
display: "flex",
flexDirection: "column",
alignItems: "center",
}),
heading: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.primary,
font: design_system_tokens_1.text.heading.small,
margin: 0,
marginTop: design_system_tokens_1.space[16],
}),
description: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.secondary,
font: design_system_tokens_1.text.body.regular.medium,
margin: 0,
marginTop: design_system_tokens_1.space[8],
}),
};