function MainComponent() { const [selectedCard, setSelectedCard] = React.useState(null); const handleSwipeUp = (card)=>{ setSelectedCard(card); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-10", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-end h-screen bg-black", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex overflow-x-auto snap-mandatory snap-x p-5", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, selectedCard && /*#__PURE__*/ React.createElement("div", { style: { animation: 'swipeUp 0.5s forwards' }, className: "absolute bottom-20 left-1/2 transform -translate-x-1/2 p-5", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedCard, alt: "Selected playing card", className: "w-[200px] h-[300px]", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "shrink-0 snap-center", onClick: ()=>handleSwipeUp("/card1.png"), __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/card1.png", alt: "Playing card 1", className: "w-[100px] h-[150px]", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "shrink-0 snap-center", onClick: ()=>handleSwipeUp("/card2.png"), __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/card2.png", alt: "Playing card 2", className: "w-[100px] h-[150px]", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "shrink-0 snap-center", onClick: ()=>handleSwipeUp("/card3.png"), __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/card3.png", alt: "Playing card 3", className: "w-[100px] h-[150px]", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "shrink-0 snap-center", onClick: ()=>handleSwipeUp("/card4.png"), __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/card4.png", alt: "Playing card 4", className: "w-[100px] h-[150px]", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "shrink-0 snap-center", onClick: ()=>handleSwipeUp("/card5.png"), __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/card5.png", alt: "Playing card 5", className: "w-[100px] h-[150px]", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, ` @keyframes swipeUp { to { bottom: 100%; opacity: 0; } } `)); }