function MainComponent() { const [selectedGenre, setSelectedGenre] = React.useState(null); const genres = [ { name: 'Jpop', songs: [ 'Song 1', 'Song 2', 'Song 3' ] }, { name: 'Kpop', songs: [ 'Song 4', 'Song 5', 'Song 6' ] }, { name: 'Anison', songs: [ 'Song 7', 'Song 8', 'Song 9' ] }, { name: 'Vocaloid', songs: [ 'Song 10', 'Song 11', 'Song 12' ] }, { name: 'Western', songs: [ 'Song 13', 'Song 14', 'Song 15' ] } ]; const handleClick = (genre)=>{ setSelectedGenre(genre); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#e0f7fa] text-[#000000] font-sans", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[600px] h-[600px] flex items-center justify-center", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full rounded-full bg-[#ffffffcc] flex items-center justify-center", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, genres.map((genre, index)=>{ const angle = 360 / genres.length * index; const isSelected = selectedGenre && selectedGenre.name === genre.name; return /*#__PURE__*/ React.createElement("div", { key: genre.name, className: `absolute rounded-full cursor-pointer transition-transform ${isSelected ? 'scale-125' : ''}`, style: { transform: `rotate(${angle}deg) translate(300px) rotate(-${angle}deg)`, width: isSelected ? '200px' : '150px', height: isSelected ? '200px' : '150px', backgroundColor: '#006064', opacity: 0.8 }, onClick: ()=>handleClick(genre), __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full h-full text-white text-xl font-bold", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, genre.name)); })), selectedGenre && /*#__PURE__*/ React.createElement("div", { className: "absolute top-[650px] left-1/2 transform -translate-x-1/2 w-[400px] bg-[#bbdefb] rounded-lg p-4 shadow-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Songs in ", selectedGenre.name), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, selectedGenre.songs.map((song)=>/*#__PURE__*/ React.createElement("li", { key: song, className: "text-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, song))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, ` .transition-transform { transition: transform 0.3s; } `)); }