Untitled
import { Tag } from "antd"; import PropTypes from "prop-types"; import "../../assets/styles/ShoppingCart.scss"; const OptionCart = ({ categories, selectedTags, onChange, onSave, onCancel, }) => { return ( <div className="size-popup"> <div className="size-popup-content"> <h3 style={{ textAlign: "center", marginBottom: "16px" }}> Update Options </h3> <div style={{ display: "block", marginBottom: "24px" }}> {categories.map((category) => ( <div key={category.name} style={{ marginBottom: "16px", display: "flex", alignItems: "center", // Căn giữa dọc }} > <div style={{ fontWeight: "bold", fontSize: "16px", marginRight: "16px", // Tạo khoảng cách giữa tên và tag whiteSpace: "nowrap", }} > {category.name}: </div> <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}> {category.tags.map((tag) => ( <Tag.CheckableTag key={`${category.name}-${tag}`} checked={selectedTags[category.name] === tag} onChange={() => onChange(category.name, tag)} > {tag} </Tag.CheckableTag> ))} </div> </div> ))} </div> <div className="size-popup-actions"> <button onClick={onCancel} className="cancel-button-option"> Cancel </button> <button onClick={onSave} className="save-button-option"> Save </button> </div> </div> </div> ); }; OptionCart.propTypes = { categories: PropTypes.arrayOf( PropTypes.shape({ name: PropTypes.string.isRequired, tags: PropTypes.arrayOf(PropTypes.string).isRequired, }) ).isRequired, selectedTags: PropTypes.object.isRequired, onChange: PropTypes.func.isRequired, onSave: PropTypes.func.isRequired, onCancel: PropTypes.func.isRequired, }; export default OptionCart;
Leave a Comment