33 lines
1.0 KiB
JavaScript
33 lines
1.0 KiB
JavaScript
import { motion } from 'motion/react';
|
|
import ProductListTable from './ProductListTable';
|
|
import PropTypes from 'prop-types';
|
|
|
|
function ProductModal({ productInfo, handleProductSelect }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
key="productList"
|
|
className="fixed z-50 inset-0 flex items-center justify-center bg-black/50"
|
|
>
|
|
<motion.div
|
|
initial={{ y: 15, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
exit={{ y: 15, opacity: 0 }}
|
|
className="flex flex-col items-center bg-white p-4 py-8 rounded-3xl w-[60%] max-h-[80%] overflow-auto font-body"
|
|
>
|
|
<h2 className="text-xl mb-4">Select Product</h2>
|
|
<ProductListTable productInfo={productInfo} onSelectProduct={handleProductSelect} />
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
ProductModal.propTypes = {
|
|
productInfo: PropTypes.object.isRequired,
|
|
handleProductSelect: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default ProductModal;
|