function MainComponent() { const [subscriptions, setSubscriptions] = React.useState([ { name: 'Basic Plan', cycle: 'Monthly', fee: '$9' }, { name: 'Pro Plan', cycle: 'Monthly', fee: '$29' }, { name: 'Business Plan', cycle: 'Annual', fee: '$299' } ]); const handleCancel = (planName)=>{ setSubscriptions(subscriptions.map((sub)=>sub.name === planName ? { ...sub, cycle: 'Cancelled' } : sub)); }; const subscriptionRows = subscriptions.map((subscription)=>/*#__PURE__*/ React.createElement("tr", { key: subscription.name, __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, subscription.name), /*#__PURE__*/ React.createElement("td", { className: `py-2 px-4 border-b ${subscription.cycle === 'Cancelled' ? 'text-[#dc3545]' : 'text-[#28a745]'}`, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, subscription.cycle), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, subscription.fee), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, subscription.cycle !== 'Cancelled' && /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 bg-[#dc3545] text-white rounded-md", onClick: ()=>handleCancel(subscription.name), __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Cancel")))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] flex flex-col justify-center items-center pt-10", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-5 bg-[#ffffff] shadow-md", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "App Subscriptions"), /*#__PURE__*/ React.createElement("button", { className: "px-5 py-2 bg-[#007bff] text-white rounded-md font-roboto text-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Sign Out"))), /*#__PURE__*/ React.createElement("main", { className: "w-full flex flex-col items-center px-4 py-10", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto text-[#121212] mb-5", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Subscription Cycles & Fees"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-[#007bff] text-white text-lg font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-3 px-4", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, "App Name"), /*#__PURE__*/ React.createElement("th", { className: "py-3 px-4", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, "Billing Cycle"), /*#__PURE__*/ React.createElement("th", { className: "py-3 px-4", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, "Subscription Fee"), /*#__PURE__*/ React.createElement("th", { className: "py-3 px-4", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { className: "text-[#121212] text-sm font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, subscriptionRows)))))); }

App Name	Billing Cycle	Subscription Fee
Basic Plan	Monthly	$9
Pro Plan	Monthly	$29
Business Plan	Annual	$299