nice-ui
Version:
React design system, components, and utilities
47 lines (46 loc) • 2.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Footer = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const SeparatorColorful_1 = require("../../3-list-item/SeparatorColorful");
const PageWidth_1 = require("../../6-page/PageWidth");
const constants_1 = require("../../constants");
const breakpoint = 1000;
const blockClass = (0, nano_theme_1.rule)({
pd: '72px 0 0',
mrb: '75vh',
});
const paddingClass = (0, nano_theme_1.rule)({
d: 'flex',
fw: 'wrap',
jc: 'space-between',
w: '100%',
maxW: constants_1.NiceUiSizes.SiteWidth + 'px',
bxz: 'border-box',
mr: '0 auto',
pd: '36px 0 64px 0',
});
const Footer = ({ narrow, footer, children }) => {
const { width } = (0, useWindowSize_1.default)();
const [hovered, setHovered] = React.useState(false);
const theme = (0, nano_theme_1.useTheme)();
const isMedium = width < 1100;
const isLarge = width > breakpoint;
let element = (React.createElement("div", { style: {
background: theme.g(0.98),
margin: isLarge ? (narrow ? '0 64px' : undefined) : '0 16px',
padding: isLarge ? '0 64px' : '0 16px',
borderRadius: '10px',
marginBottom: 100,
}, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) },
React.createElement("div", { className: paddingClass, style: { display: isMedium ? 'block' : undefined } }, children),
React.createElement(SeparatorColorful_1.SeparatorColorful, { contrast: true, grey: !hovered }),
!!footer && React.createElement("div", { style: { display: 'flex', padding: '48px 0 64px', justifyContent: 'center' } }, footer)));
if (isLarge) {
element = React.createElement(PageWidth_1.PageWidth, null, element);
}
return React.createElement("footer", { className: blockClass }, element);
};
exports.Footer = Footer;