nice-ui
Version:
React design system, components, and utilities
120 lines (119 loc) • 3.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ClickCard = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const iconista_1 = require("iconista");
const react_router_lite_1 = require("react-router-lite");
const use_t_1 = require("use-t");
const Code_1 = require("../../1-inline/Code");
const Paper_1 = require("../Paper");
const blockClass = (0, nano_theme_1.rule)({
pos: 'relative',
d: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
h: '240px',
bxz: 'border-box',
pad: '32px',
mar: '18px',
h2: {
...nano_theme_1.theme.font.ui2.bold,
fz: '24px',
mar: 0,
pad: 0,
},
p: {
pad: 0,
mar: 0,
},
svg: {
fill: nano_theme_1.theme.g(0.6),
col: nano_theme_1.theme.blue(1),
},
'&:hover svg': {
col: nano_theme_1.theme.color.sem.negative[0],
},
});
const headerClass = (0, nano_theme_1.rule)({
marl: '-2px',
pad: '0 0 16px',
});
const contentClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui3,
fz: '14px',
pad: '24px 0 0',
lh: '1.6em',
col: nano_theme_1.theme.g(0.45),
'@media only screen and (max-width: 800px)': {
pad: '16px 0',
fz: '14px',
},
});
const linkClass = (0, nano_theme_1.rule)({
a: {
d: 'flex',
alignItems: 'center',
svg: {
marl: '8px',
fill: nano_theme_1.theme.blue,
trs: 'transform .2s',
},
'&:hover': {
svg: {
fill: 'red',
transform: 'translate(10px,0)',
},
},
'&::before': {
pos: 'absolute',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
z: 1,
pointerEvents: 'auto',
content: '""',
bg: 'transparent !important',
},
},
});
const stageClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui3,
fz: '14px',
col: nano_theme_1.theme.g(0.6),
marl: '16px',
});
const ClickCard = ({ to, toTitle, title, icon, label, header, tall, noRotate, children, onClick, }) => {
const [t] = (0, use_t_1.useT)();
const labelElement = !!icon || !!label || !!header ? (React.createElement("span", { style: { height: 24, display: 'flex', alignItems: 'center' } },
icon,
!!label && (React.createElement("span", { style: { fontSize: '0.9em', opacity: 0.7, marginLeft: 16 } },
React.createElement(Code_1.Code, { gray: true, spacious: true, alt: true },
t('library'),
"d"))),
!!header && React.createElement("span", { className: stageClass }, header))) : null;
const style = {};
if (tall) {
style.height = 300;
}
let element = (React.createElement(Paper_1.Paper, { contrast: true, hoverElevate: true, round: true, className: blockClass, style: style },
React.createElement("div", null,
!!labelElement && React.createElement("div", { className: headerClass }, labelElement),
React.createElement("h2", null, title),
React.createElement("div", { className: contentClass }, children)),
React.createElement("div", { className: linkClass },
React.createElement(react_router_lite_1.Link, { a: true, to: to, onClick: onClick
? (e) => {
e.preventDefault();
onClick(e);
}
: undefined },
toTitle || t('View'),
React.createElement(iconista_1.default, { set: "ibm_16", icon: "arrow--right", width: 16, height: 16 })))));
if (!noRotate) {
element = React.createElement("div", { className: 'hoverRotate' }, element);
}
return element;
};
exports.ClickCard = ClickCard;