norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
38 lines • 2.62 kB
JavaScript
import { Grid } from "@mui/material";
import { Card } from "../Card";
import { IconCardStyle, ProductCardStyle, TitleContainer } from "./ProductCard.style";
import React from "react";
import { IconButton } from "../IconButton";
import GradeIcon from '@mui/icons-material/Grade';
import { Icons } from '../Icons';
export var ProductCard = function (_a) {
var
// product = 'analytics'
color = _a.color, icon = _a.icon, onClick = _a.onClick, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, title = _a.title, description = _a.description, favorite = _a.favorite;
/* const colors: { [key: string]: string } = {
primaryDark: '#B74608',
primaryLight: '#FCF1E3',
secondaryDark: '#6788B8',
secondaryLight: '#EEF7FB'
}
*/
return (React.createElement(ProductCardStyle, { disabled: disabled, "$bColor": icon === null || icon === void 0 ? void 0 : icon.iconColor, hasBorder: hasBorder },
React.createElement(Card, { variant: "outlined", onClick: function () { return onClick && onClick(); } },
favorite && (React.createElement(Grid, { container: true, justifyContent: 'flex-end', alignItems: 'flex-start', position: 'relative' },
React.createElement(Grid, { item: true },
React.createElement(IconButton, { sx: {
padding: 0,
position: 'absolute',
right: '2px',
}, "aria-label": "favorite", onClick: favorite.onFlag, cursor: "pointer" },
React.createElement(GradeIcon, { sx: {
color: favorite.flagged ? '#FDDA0D' : '#666',
fontSize: 24,
} }))))),
React.createElement(TitleContainer, null,
React.createElement(IconCardStyle, { "$iColor": (icon === null || icon === void 0 ? void 0 : icon.iconColor) || "", "$bColor": color },
React.createElement(Icons, { icon: icon === null || icon === void 0 ? void 0 : icon.iconName, color: icon === null || icon === void 0 ? void 0 : icon.iconColor, scale: icon === null || icon === void 0 ? void 0 : icon.scale, width: icon === null || icon === void 0 ? void 0 : icon.iconWidth, height: icon === null || icon === void 0 ? void 0 : icon.iconHeight })),
React.createElement("p", { className: "title" }, title)),
React.createElement("p", { className: "description" }, description))));
};
//# sourceMappingURL=ProductCard.js.map