function MainComponent({ ticketTiers }) { const getTotalRevenue = (percentageSold)=>{ return ticketTiers.reduce((total, tier)=>{ return total + tier.price * tier.quantity * percentageSold / 100; }, 0); }; const projections = [ 20, 40, 60, 80, 100 ].map((soldPercentage)=>({ percentage: soldPercentage, revenue: getTotalRevenue(soldPercentage) })); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Ticket Tiers"), ticketTiers.map((tier, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-4 border rounded bg-gray-100", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, tier.name), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold mb-1 font-roboto", htmlFor: `price-${index}`, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Price:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: `price-${tier.name}`, id: `price-${index}`, className: "w-full px-2 py-1 border rounded", value: tier.price, readOnly: true, __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-bold mb-1 font-roboto", htmlFor: `quantity-${index}`, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Quantity:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: `quantity-${tier.name}`, id: `quantity-${index}`, className: "w-full px-2 py-1 border rounded", value: tier.quantity, readOnly: true, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Projected Revenue"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[200px] bg-gray-200 rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, projections.map((proj, index)=>{ const leftPercentage = index * 20; return /*#__PURE__*/ React.createElement("div", { key: index, className: `absolute bottom-0 left-[${leftPercentage}%] h-full w-[20%] bg-blue-${500 - index * 100}`, style: { height: `${proj.revenue / projections[4].revenue * 100}%` }, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }); })))); } function StoryComponent() { const ticketTiers = [ { name: 'Tier 1', price: 100, quantity: 50 }, { name: 'Tier 2', price: 200, quantity: 30 }, { name: 'Tier 3', price: 300, quantity: 20 } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { ticketTiers: ticketTiers, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this })); }