36 lines
1.0 KiB
JavaScript
36 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;
|