import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import ColorPalette from './colorPaletteList';
import './ColorPalette.scss';
// Component to render each color card
const ColorBox = ({ name, colorCode, opacity, dropShadow, border, variable, }) => {
    const opacityPercentage = opacity ? `${Math.round(opacity * 100)}%` : '';
    const boxStyle = {
        background: colorCode,
        opacity: opacity,
        filter: dropShadow ? dropShadow : '',
        border: `1px solid ${border}`,
        color: colorCode,
    };
    return (_jsxs("div", { className: "color-card", children: [_jsx("span", { className: "color-name", children: name }), _jsx("div", { className: "color-box", style: boxStyle, children: _jsx("p", { style: { '--colorCode': colorCode }, children: " " }) }), _jsxs("span", { className: "color-code", children: [colorCode, " ", opacityPercentage && `opacity ${opacityPercentage}`, " ", _jsx("br", {}), border && `Border -${border}`] }), _jsx("span", { className: "color-code", children: variable })] }));
};
// Main Colors component
const Colors = () => {
    return (_jsxs("div", { className: "ff-style-guide", children: [_jsxs("div", { className: "style-guide-header", children: [_jsx("div", { children: "Colors" }), _jsx("span", { children: "Application of the color palette brings a unified and recognisable consistency to MX's array of digital products and interface." })] }), _jsx("div", { className: "style-guide-content", children: ColorPalette.map((color) => (_jsx(ColorBox, { name: color.name, colorCode: color.colorCode, opacity: color?.opacity, dropShadow: color?.dropShadow, border: color?.border, variable: color.variable }, color.name))) })] }));
};
export default Colors;
//# sourceMappingURL=ColorPalette.js.map