@cimpress/react-components
Version:
React components to support the MCP styleguide
30 lines • 1.25 kB
JavaScript
import React, { useState } from 'react';
import { css } from '@emotion/css';
import SelectableCard from './SelectableCard';
import cvar from '../theme/cvar';
const cardsContainer = css `
display: flex;
align-items: center;
`;
export default function SelectableCards(props) {
const { multiSelect = false, cards = [], spacing = cvar('spacing-8'), size = 'sm' } = props;
const [selectedCards, setSelectedCards] = useState([]);
const onCardSelected = (card) => {
if (multiSelect) {
setSelectedCards(selectedCards.concat(card));
}
else {
setSelectedCards([card]);
}
};
const onCardDeselected = (card) => {
if (multiSelect) {
setSelectedCards(selectedCards.filter(c => c !== card));
}
else {
setSelectedCards([]);
}
};
return (React.createElement("div", { className: cardsContainer }, cards.map(c => (React.createElement(SelectableCard, { key: c.label, label: c.label, image: c.image, cardStyle: { marginRight: spacing }, selected: selectedCards.includes(c), onCardSelected: () => onCardSelected(c), onCardDeselected: () => onCardDeselected(c), size: size })))));
}
//# sourceMappingURL=SelectableCards.js.map