function BettingForm({ onSubmit }) { const [bet, setBet] = React.useState(''); const [amount, setAmount] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); onSubmit(bet, amount); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Bet:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "bet", value: bet, onChange: (e)=>setBet(e.target.value), className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Amount:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", value: amount, onChange: (e)=>setAmount(e.target.value), className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#ffcc00] hover:bg-[#e6b800] text-black py-2 px-4 rounded", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Place Bet")); } function MainComponent({ matches }) { const handleBetSubmit = (bet, amount)=>{ console.log(`Betting on: ${bet} with amount: ${amount}`); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#343a40] text-white p-4 text-center", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Live Betting Service")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, matches.map((match, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-300 p-4 rounded-md shadow-md", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, match.title), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Date: ", match.date), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Time: ", match.time), /*#__PURE__*/ React.createElement("div", { className: "text-[#d9534f] mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Status: Live"), /*#__PURE__*/ React.createElement(BettingForm, { onSubmit: handleBetSubmit, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }))))); } function StoryComponent() { const matches = [ { title: "Team A vs Team B", date: "2023-10-10", time: "18:00" }, { title: "Team C vs Team D", date: "2023-10-11", time: "20:00" }, { title: "Team E vs Team F", date: "2023-10-12", time: "19:30" } ]; return /*#__PURE__*/ React.createElement(MainComponent, { matches: matches, __source: { fileName: "", lineNumber: 69, columnNumber: 10 }, __self: this }); }