function MainComponent({ entryDate, shipmentDate, items, onDateChange }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-5 rounded-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4 mb-4 bg-white p-5 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-gray-700 mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Inventory Dates"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-gray-700 mb-1", htmlFor: "entry-date", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Entry Date"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-400 rounded-lg", type: "date", id: "entry-date", name: "entryDate", value: entryDate, onChange: (e)=>onDateChange(e.target.name, e.target.value), __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-gray-700 mb-1", htmlFor: "shipment-date", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Shipment Date"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-gray-400 rounded-lg", type: "date", id: "shipment-date", name: "shipmentDate", value: shipmentDate, onChange: (e)=>onDateChange(e.target.name, e.target.value), __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-5 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-gray-700 mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Item List"), items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2 p-2 flex justify-between items-center border border-gray-400 rounded-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, item.stock))))); } function StoryComponent() { const [entryDate, setEntryDate] = React.useState(""); const [shipmentDate, setShipmentDate] = React.useState(""); const initialItems = [ { name: "Item A", stock: 150 }, { name: "Item B", stock: 200 }, { name: "Item C", stock: 85 } ]; const [items, setItems] = React.useState(initialItems); const handleDateChange = (name, value)=>{ if (name === "entryDate") { setEntryDate(value); } else if (name === "shipmentDate") { setShipmentDate(value); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-5", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { entryDate: entryDate, shipmentDate: shipmentDate, items: items, onDateChange: handleDateChange, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); }