nice-ui/lib/6-page/DocsPages/DocsMarkdown/components/InlineCard.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const nano_theme_1 = require("nano-theme");
const React = require("react");
const constants_1 = require("../../../../constants");
const blockClass = (0, nano_theme_1.rule)({
    // bd: `1px solid ${theme.g(0.98)}`,
    bd: `1px solid ${nano_theme_1.theme.g(0.9)}`,
    bdrad: '8px',
    mar: '0 0 32px',
    pad: '32px',
    '&+p': {
        mart: '-32px',
    },
    // '&:hover': {
    //   bd: `1px solid ${theme.g(0.9)}`,
    // },
    // [`@media(max-width: ${Dimensions.SiteWidth}px)`]: {
    // bd: `1px solid ${theme.g(0.9)}`,
    // },
    [`@media(max-width: ${constants_1.NiceUiSizes.BlogContentMaxWidth}px)`]: {
        pad: '16px',
    },
});
const contentsClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.ui2.mid,
    col: nano_theme_1.theme.g(0.5),
    fz: '10px',
    // ta: 'right',
    textTransform: 'uppercase',
    marb: '8px',
    bdb: `1px solid ${nano_theme_1.theme.g(0.92)}`,
    [`@media(max-width: ${constants_1.NiceUiSizes.BlogContentMaxWidth}px)`]: {
        bdb: 0,
    },
    // [`@media(min-width: ${Dimensions.SiteWidth}px)`]: {
    //   op: 0.4,
    //   [`.${blockClass.trim()}:hover &`]: {
    //     op: 1,
    //   },
    // },
});
const InlineCard = ({ title, children }) => {
    return (React.createElement("div", { className: blockClass },
        React.createElement("div", { className: contentsClass }, title),
        children));
};
exports.default = InlineCard;