function MainComponent() { const fruits = [ { emoji: "🍓", size: 20 }, { emoji: "🍇", size: 40 }, { emoji: "🍊", size: 60 }, { emoji: "🍎", size: 80 }, { emoji: "🍑", size: 100 }, { emoji: "🍍", size: 120 }, { emoji: "🍈", size: 140 }, { emoji: "🍉", size: 160 } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full h-full bg-gradient-to-b from-yellow-300 to-orange-500", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-full bg-white w-[120px] h-[120px] flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-2xl", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "スコア"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-4xl", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "1900"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg text-gray-500", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "2085"))), /*#__PURE__*/ React.createElement("div", { className: "rounded-full bg-white w-[120px] h-[120px] flex items-center justify-center", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-2xl", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "ネクスト"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "🍓")))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-grow justify-evenly w-full", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-3", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "ランキング"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-1 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#ff5733]", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "1位"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-blue-500", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "1924")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-1 bg-gray-200 rounded mt-1", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#ff5733]", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "2位"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-blue-500", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, "1822")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between p-1 bg-gray-200 rounded mt-1", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#ff5733]", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "3位"), /*#__PURE__*/ React.createElement("div", { className: "font-bold text-blue-500", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "1900"))))), /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[300px] bg-white rounded-lg flex items-center justify-center overflow-hidden", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, fruits.map((fruit, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `absolute w-[${fruit.size}px] h-[${fruit.size}px] rounded-full flex items-center justify-center`, style: { backgroundColor: [ "#34D399", "#FB923C", "#F87171", "#F97316", "#C084FC", "#FBBF24", "#F472B6", "#4ADE80" ][index], left: `${Math.random() * 260}px`, top: `${Math.random() * 260}px` }, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, fruit.emoji))), /*#__PURE__*/ React.createElement("div", { className: "rounded-full bg-white w-[120px] h-[120px] flex items-center justify-center", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-2xl", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "シンクロ輪"), /*#__PURE__*/ React.createElement("div", { className: "relative w-[80px] h-[80px] flex items-center justify-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, fruits.map((fruit, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-[20px] h-[20px] rounded-full flex items-center justify-center absolute`, style: { backgroundColor: [ "#34D399", "#FBBF24", "#F472B6", "#F87171", "#FB923C", "#C084FC", "#F97316", "#4ADE80" ][index], left: [ "50%", "10%", "90%", "10%", "90%", "50%", "50%", "50%" ][index], top: [ "50%", "0%", "0%", "100%", "100%", "calc(50% - 10px)", "calc(50% - 10px)", "50%" ][index], transform: [ "", "translateX(-10%)", "translateX(10%)", "translateY(-10%)", "translateY(-10%)", "translate(-50%, -50%)", "translate(50%, 50%)", "translate(-50%, -50%)" ][index] }, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, fruit.emoji))))))); }