function NewComponent({ name, value, onChange, options }) { return /*#__PURE__*/ React.createElement("select", { name: name, value: value, onChange: onChange, className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, options.map((option, idx)=>/*#__PURE__*/ React.createElement("option", { key: idx, value: option.value, __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, option.label))); } function NewComponentStory() { const salesData = [ { month: "January" }, { month: "February" }, { month: "March" }, { month: "April" } ]; const [selectedMonth, setSelectedMonth] = React.useState(salesData[0].month); const handleMonthChange = (event)=>{ setSelectedMonth(event.target.value); }; const options = salesData.map((data)=>({ value: data.month, label: data.month })); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { name: "month", value: selectedMonth, onChange: handleMonthChange, options: options, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function MainComponent() { const salesData = [ { month: "January", sales: 30 }, { month: "February", sales: 50 }, { month: "March", sales: 70 }, { month: "April", sales: 20 } ]; const [selectedMonth, setSelectedMonth] = React.useState(salesData[0].month); const [sales, setSales] = React.useState(salesData[0].sales); const handleMonthChange = (event)=>{ const month = event.target.value; setSelectedMonth(month); const selectedData = salesData.find((data)=>data.month === month); setSales(selectedData.sales); }; const options = salesData.map((data)=>({ value: data.month, label: data.month })); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-6 font-sans", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] p-6 rounded-lg shadow-lg mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("table", { className: "w-full text-left", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Plan"), /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Features"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Basic"), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "$9.99/month"), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Feature 1, Feature 2")), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Standard"), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "$19.99/month"), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Feature 1, Feature 2, Feature 3")), /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Premium"), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "$29.99/month"), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Feature 1, Feature 2, Feature 3, Feature 4"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] p-6 rounded-lg shadow-lg mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Coupons"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "couponCode", placeholder: "Coupon Code", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "discountAmount", placeholder: "Discount Amount", className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded w-full", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Add Coupon"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f4f8] p-6 rounded-lg shadow-lg mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Sales Graph"), /*#__PURE__*/ React.createElement(NewComponent, { name: "month", value: selectedMonth, onChange: handleMonthChange, options: options, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-gray-200", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-blue-500", style: { width: `${sales}%` }, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-center font-bold", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, sales, " Sales in ", selectedMonth)))); }

Plan	Price	Features
Basic	$9.99/month	Feature 1, Feature 2
Standard	$19.99/month	Feature 1, Feature 2, Feature 3
Premium	$29.99/month	Feature 1, Feature 2, Feature 3, Feature 4