function MainComponent() { const [balance, setBalance] = React.useState(1000); const [linkedSportsbooks, setLinkedSportsbooks] = React.useState([ 'DraftKings', 'FanDuel', 'BetMGM' ]); const [recentTransactions, setRecentTransactions] = React.useState([ { id: 1, type: 'Deposit', amount: 200, date: '2023-06-15' }, { id: 2, type: 'Bet', amount: -50, date: '2023-06-16' }, { id: 3, type: 'Win', amount: 100, date: '2023-06-17' } ]); const [notifications, setNotifications] = React.useState([ { id: 1, message: 'New betting opportunity in NBA!', time: '2 min ago' }, { id: 2, message: 'Your favorite team is playing soon', time: '10 min ago' } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-900 text-white font-roboto p-8", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Walkoff Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Account Overview"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Balance: $", balance), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Linked Sportsbooks"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, linkedSportsbooks.map((book, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-blue-400", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, book))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Recent Transactions"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, recentTransactions.map((transaction)=>/*#__PURE__*/ React.createElement("li", { key: transaction.id, className: "mb-2 flex justify-between", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, transaction.type), /*#__PURE__*/ React.createElement("span", { className: transaction.amount > 0 ? 'text-green-400' : 'text-red-400', __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "$", Math.abs(transaction.amount)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Real-time Analytics"), /*#__PURE__*/ React.createElement("div", { className: "h-40 bg-gray-700 rounded flex items-center justify-center", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Analytics Widget Placeholder"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Betting Trends"), /*#__PURE__*/ React.createElement("div", { className: "h-40 bg-gray-700 rounded flex items-center justify-center", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Trends Widget Placeholder"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Predictive Analytics"), /*#__PURE__*/ React.createElement("div", { className: "h-40 bg-gray-700 rounded flex items-center justify-center", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Predictions Widget Placeholder"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, notifications.map((notification)=>/*#__PURE__*/ React.createElement("li", { key: notification.id, className: "mb-2 border-b border-gray-700 pb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, notification.message), /*#__PURE__*/ React.createElement("small", { className: "text-gray-400", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, notification.time))))))); }