@redocly/theme/lib/layouts/NotFound.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NotFound = NotFound;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../core/hooks");
const Button_1 = require("../components/Button/Button");
const ArrowLeftIcon_1 = require("../icons/ArrowLeftIcon/ArrowLeftIcon");
function NotFound() {
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    return (react_1.default.createElement(NotFoundWrapper, { "data-component-name": "layouts/NotFound" },
        react_1.default.createElement(StatusText, null, "404"),
        react_1.default.createElement(Title, { "data-translation-key": "page.notFound.title" }, translate('page.notFound.title', 'Something went missing...')),
        react_1.default.createElement(Description, { "data-translation-key": "page.notFound.description" }, translate('page.notFound.description', "The page you were trying to reach doesn't exist or may have been moved. You can go back to the previous page, return to the homepage, or use the search bar to find what you're looking for.")),
        react_1.default.createElement(Button_1.Button, { variant: "primary", size: "large", to: "/", "data-translation-key": "page.homeButton", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) }, translate('page.homeButton', 'Go home'))));
}
const NotFoundWrapper = styled_components_1.default.div `
  height: 100%;
  max-width: var(--page-404-max-width);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: var(--page-404-margin-vertical) var(--page-404-margin-horizontal);
  font-family: var(--page-404-font-family);
  gap: var(--page-404-gap);
`;
const StatusText = styled_components_1.default.div `
  color: var(--page-404-status-text-color);
  font-size: var(--page-404-status-font-size);
  line-height: var(--page-404-status-line-height);
  font-weight: var(--page-404-status-font-weight);
`;
const Title = styled_components_1.default.div `
  color: var(--page-404-title-text-color);
  font-size: var(--page-404-title-font-size);
  line-height: var(--page-404-title-line-height);
  font-weight: var(--page-404-title-font-weight);
`;
const Description = styled_components_1.default.div `
  color: var(--page-404-description-text-color);
  font-size: var(--page-404-description-font-size);
  line-height: var(--page-404-description-line-height);
  font-weight: var(--page-404-description-font-weight);
`;
//# sourceMappingURL=NotFound.js.map