function WarrantyManagementSystem({ onSubmit }) { const [formData, setFormData] = React.useState({ productName: '', serialNumber: '', purchaseDate: '', customerName: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prevFormData)=>({ ...prevFormData, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); onSubmit(formData); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-[#F9F9F9]", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg p-8 bg-white shadow-md rounded-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Warranty Registration"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "productName", className: "block text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Product Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "productName", id: "productName", className: "mt-1 block w-full border border-gray-300 p-2 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500", value: formData.productName, onChange: handleChange, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "serialNumber", className: "block text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Serial Number"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "serialNumber", id: "serialNumber", className: "mt-1 block w-full border border-gray-300 p-2 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500", value: formData.serialNumber, onChange: handleChange, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "purchaseDate", className: "block text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Purchase Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "purchaseDate", id: "purchaseDate", className: "mt-1 block w-full border border-gray-300 p-2 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500", value: formData.purchaseDate, onChange: handleChange, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "customerName", className: "block text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Customer Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "customerName", id: "customerName", className: "mt-1 block w-full border border-gray-300 p-2 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500", value: formData.customerName, onChange: handleChange, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Submit"))); } function WarrantyManagementSystemStory() { const handleFormSubmit = (data)=>{ console.log(data); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WarrantyManagementSystem, { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function MainComponent() { const [userWarrantyData, setUserWarrantyData] = React.useState(null); const [isEditing, setIsEditing] = React.useState(false); const handleFormSubmit = (data)=>{ setUserWarrantyData(data); }; const handleEdit = ()=>{ setIsEditing(true); }; const handleSaveEdit = (editedData)=>{ setUserWarrantyData(editedData); setIsEditing(false); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, userWarrantyData && !isEditing ? /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#F9F9F9]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-8 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "My Warranty"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Product Name: ", userWarrantyData.productName), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Serial Number: ", userWarrantyData.serialNumber), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Purchase Date: ", userWarrantyData.purchaseDate), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Customer Name: ", userWarrantyData.customerName), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md", onClick: handleEdit, __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Edit"))) : /*#__PURE__*/ React.createElement(WarrantyManagementSystem, { onSubmit: isEditing ? handleSaveEdit : handleFormSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this })); }