function MainComponent() { const [currentSong, setCurrentSong] = React.useState(null); const [isPlaying, setIsPlaying] = React.useState(false); const playlists = [ { name: "今日のトップヒット", image: "/playlist1.jpg" }, { name: "あなただけのミックス", image: "/playlist2.jpg" }, { name: "リラックス", image: "/playlist3.jpg" }, { name: "ワークアウト", image: "/playlist4.jpg" } ]; const recentlyPlayed = [ { name: "Shape of You", artist: "Ed Sheeran", image: "/song1.jpg" }, { name: "Blinding Lights", artist: "The Weeknd", image: "/song2.jpg" }, { name: "Dance Monkey", artist: "Tones and I", image: "/song3.jpg" }, { name: "Watermelon Sugar", artist: "Harry Styles", image: "/song4.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#121212] text-white font-sans", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-64 bg-black p-6", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "音楽アプリ"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 36 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home mr-3", __source: { fileName: "", lineNumber: 26, columnNumber: 78 }, __self: this }), "ホーム")), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 36 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-3", __source: { fileName: "", lineNumber: 27, columnNumber: 78 }, __self: this }), "検索")), /*#__PURE__*/ React.createElement("li", { className: "mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 36 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book mr-3", __source: { fileName: "", lineNumber: 28, columnNumber: 78 }, __self: this }), "ライブラリ"))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "プレイリスト"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, playlists.map((playlist, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: playlist.image, alt: playlist.name, className: "w-10 h-10 mr-3 rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }), playlist.name)))))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 overflow-y-auto p-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "最近再生した曲"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, recentlyPlayed.map((song, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#181818] p-4 rounded-lg hover:bg-[#282828] transition-colors", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: song.image, alt: song.name, className: "w-full aspect-square object-cover mb-4 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, song.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, song.artist))))), /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 left-0 right-0 bg-[#181818] border-t border-[#282828] p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentSong ? currentSong.image : "/default-album.jpg", alt: "現在再生中の曲", className: "w-14 h-14 mr-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, currentSong ? currentSong.name : "曲を選択してください"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, currentSong ? currentSong.artist : "アーティスト"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mx-2 text-2xl", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-backward", __source: { fileName: "", lineNumber: 68, columnNumber: 47 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mx-2 text-3xl", onClick: ()=>setIsPlaying(!isPlaying), __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isPlaying ? 'fa-pause-circle' : 'fa-play-circle'}`, __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mx-2 text-2xl", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-forward", __source: { fileName: "", lineNumber: 72, columnNumber: 47 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up mr-2", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-24 h-1 bg-gray-600 rounded-full", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-full bg-white rounded-full", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this })))))); }