function BettingAppForm({ placeBet, besideBetIcon, betButtonIcon }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-200 p-4 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Betting App"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-3xl", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "mt-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-full max-w-[400px]", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Place Your Bet"), /*#__PURE__*/ React.createElement("form", { onSubmit: placeBet, __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "betAmount", className: "block text-sm font-semibold mb-2", __source: { fileName: "", lineNumber: 14, columnNumber: 17 }, __self: this }, "Bet Amount"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "betAmount", name: "betAmount", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "betOption", className: "block text-sm font-semibold mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, "Bet Option ", besideBetIcon), /*#__PURE__*/ React.createElement("select", { id: "betOption", name: "betOption", className: "w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "team1", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }, "Team 1"), /*#__PURE__*/ React.createElement("option", { value: "team2", __source: { fileName: "", lineNumber: 30, columnNumber: 19 }, __self: this }, "Team 2"), /*#__PURE__*/ React.createElement("option", { value: "draw", __source: { fileName: "", lineNumber: 31, columnNumber: 19 }, __self: this }, "Draw"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-[#010101] text-white rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, betButtonIcon, " Place Bet")))))); } function BettingAppFormStory() { const placeBet = (e)=>{ e.preventDefault(); alert('Bet Placed'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BettingAppForm, { placeBet: placeBet, besideBetIcon: /*#__PURE__*/ React.createElement("i", { className: "fas fa-star", __source: { fileName: "", lineNumber: 57, columnNumber: 24 } }), betButtonIcon: /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 58, columnNumber: 24 } }), __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function MainComponent() { const besideBetIcon = /*#__PURE__*/ React.createElement("i", { className: "fas fa-dice", __source: { fileName: "", lineNumber: 2, columnNumber: 25 }, __self: this }); const betButtonIcon = /*#__PURE__*/ React.createElement("i", { className: "fas fa-coins", __source: { fileName: "", lineNumber: 3, columnNumber: 25 }, __self: this }); const placeBet = (event)=>{ event.preventDefault(); const betAmount = event.target.betAmount.value; const betOption = event.target.betOption.value; alert(`Bet placed: $${betAmount} on ${betOption}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BettingAppForm, { placeBet: placeBet, besideBetIcon: besideBetIcon, betButtonIcon: betButtonIcon, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); }