function MainComponent({ onPlaceChip, balance, onStartAutobet }) { const [selectedSlot, setSelectedSlot] = React.useState(''); const handleSlotSelect = (event)=>{ setSelectedSlot(event.target.value); }; const handleStartAutobet = ()=>{ onStartAutobet(selectedSlot); }; const canStartAutobet = selectedSlot !== ''; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#333] p-6 rounded-md shadow-lg flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FAFAFA] font-bold text-3xl mb-3", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Plinko Gambling App"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#D9D9D9] font-roboto text-base", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Balance: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 16, columnNumber: 22 }, __self: this }, "$", balance))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-9 gap-0", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, Array.from({ length: 45 }, (_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-6 h-6", style: { marginTop: `${index % 9 * 0.35}rem` }, __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-full w-full h-full", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full mt-1 px-12", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, Array.from({ length: 9 }, (_, index)=>/*#__PURE__*/ React.createElement("div", { key: `multiplier-${index}`, className: `text-sm w-8 h-8 rounded-full flex items-center justify-center ${selectedSlot === index ? 'text-white bg-[#FF8C00]' : 'text-white'}`, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, index + 1))), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center gap-2 mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, Array.from({ length: 9 }, (_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, name: `slot-${index}`, onClick: handleSlotSelect, value: index, className: `w-10 h-10 rounded-full font-roboto ${selectedSlot === index ? 'bg-[#FF8C00]' : 'bg-[#525252]'}`, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, index + 1))), /*#__PURE__*/ React.createElement("button", { onClick: handleStartAutobet, className: `w-[200px] py-3 px-6 rounded font-roboto text-lg ${canStartAutobet ? 'bg-[#32CD32]' : 'bg-gray-500 cursor-not-allowed'}`, disabled: !canStartAutobet, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Start Autobet"))); } function StoryComponent() { const handlePlaceChip = (slot)=>{ console.log(`Chip placed in slot: ${slot}`); }; const handleStartAutobet = (slot)=>{ console.log(`Autobet started in slot: ${slot}`); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-6 p-4 bg-[#222] min-h-screen", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onPlaceChip: handlePlaceChip, balance: 5000, onStartAutobet: handleStartAutobet, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this })); }