@redocly/theme/lib/components/Footer/Footer.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.Footer = Footer;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const FooterItem_1 = require("../../components/Footer/FooterItem");
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const FooterCopyright_1 = require("../../components/Footer/FooterCopyright");
const FooterColumn_1 = require("../../components/Footer/FooterColumn");
function Footer({ className }) {
    const { footer } = (0, hooks_1.useThemeConfig)() || {};
    const { items = [], copyrightText } = footer || {};
    if (((0, utils_1.isEmptyArray)(items) && !copyrightText) || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
        return null;
    }
    const withColumns = items.some((item) => { var _a; return (((_a = item === null || item === void 0 ? void 0 : item.items) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0; });
    return (react_1.default.createElement(FooterWrapper, { "data-component-name": "Footer/Footer", className: className, withColumns: withColumns },
        !!items.length && (react_1.default.createElement(FooterColumnsSection, null, withColumns
            ? items.map((column, index) => (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: `${column.label}_${index}`, column: column })))
            : items.map((item, index) => (react_1.default.createElement(FooterItem_1.FooterItem, { key: index, item: item }))))),
        react_1.default.createElement(FooterCopyrightWrapper, null, copyrightText && react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText }))));
}
const FooterCopyrightWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: row;
  align-items: start;
  align-self: center;

  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    margin-top: 0;
  }

  @media screen and (min-width: ${utils_1.breakpoints.max}) {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
  }
`;
const FooterColumnsSection = styled_components_1.default.div `
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--footer-column-gap);

  @media screen and (min-width: ${utils_1.breakpoints.small}) {
    flex-direction: row;
  }

  @media screen and (min-width: ${utils_1.breakpoints.max}) {
    max-width: var(--container-max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
`;
const FooterWrapper = styled_components_1.default.footer `
  padding: var(--mobile-footer-padding-vertical) var(--mobile-footer-padding-horizontal);
  border-top: 1px solid var(--footer-border-color);
  font-size: var(--footer-font-size);
  flex-shrink: 0;
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  font-weight: var(--footer-font-weight);
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;

  @media screen and (min-width: ${utils_1.breakpoints.small}) {
    padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
    flex-direction: row;
    ${({ withColumns }) => withColumns
    ? `
    flex-direction: column;
    align-items: stretch;
  `
    : `justify-content: space-between;`}
  }
`;
//# sourceMappingURL=Footer.js.map