design-system-simplefi
Version:
Design System for SimpleFi Applications
42 lines • 2.5 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import React from 'react';
import styled from 'styled-components';
import { transparentize } from 'polished';
import { FlexContainer, Padbox } from '../layout';
import { pxToRem } from '../../utils';
var CardSt = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n box-shadow: 0 2px 6px 0 ", ";\n cursor: ", ";\n"], ["\n position: relative;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n box-shadow: 0 2px 6px 0 ", ";\n cursor: ", ";\n"])), function (_a) {
var width = _a.width;
return (typeof width === 'number' ? pxToRem(width) : width);
}, function (_a) {
var height = _a.height;
return typeof height === 'number' ? pxToRem(height) : height;
}, function (_a) {
var borderRadius = _a.borderRadius;
return borderRadius;
}, transparentize(0.85, '#000'), function (_a) {
var clickable = _a.clickable;
return (clickable ? 'pointer' : 'unset');
});
var borderRadiusOptions = {
sm: '5px',
md: '10px',
lg: '15px',
};
var Card = function (_a) {
var children = _a.children, _b = _a.width, width = _b === void 0 ? 400 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c, justifyContent = _a.justifyContent, flexDirection = _a.flexDirection, alignItems = _a.alignItems, flexWrap = _a.flexWrap, _d = _a.paddingType, paddingType = _d === void 0 ? 'squish' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 'sm' : _e, onClick = _a.onClick, style = _a.style, ref = _a.ref;
return (React.createElement(CardSt, { ref: ref, borderRadius: borderRadiusOptions[borderRadius], clickable: !!onClick, height: height, style: style, width: width, onClick: onClick || (function () { }) },
React.createElement(Padbox, { paddingSize: "sm", paddingType: paddingType, style: {
height: '100%',
width: '100%',
} },
React.createElement(FlexContainer, { alignItems: alignItems, flexDirection: flexDirection, flexWrap: flexWrap, justifyContent: justifyContent, style: {
height: '100%',
width: '100%',
} }, children))));
};
export default Card;
var templateObject_1;
//# sourceMappingURL=Card.js.map