reactored code to use formfields and formselects

src/components/ProductModal.jsx

@@ -0,0 +1,35 @@
+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;