function MainComponent() { const [videos, setVideos] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [currentVideo, setCurrentVideo] = useState(null); const [videoKey, setVideoKey] = useState(0); useEffect(()=>{ const fetchVideos = async ()=>{ try { const response = await fetch("/api/db/video-data-v4", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `videos` WHERE `course_name` = 'Canva' ORDER BY `upload_date` DESC" }) }); const data = await response.json(); if (Array.isArray(data) && data.length > 0) { setVideos(data); setCurrentVideo(data[0]); } else { setError("動画が見つかりませんでした"); } setLoading(false); } catch (err) { console.error("Fetch error:", err); setError("動画の読み込みに失敗しました"); setLoading(false); } }; fetchVideos(); }, []); const handleVideoClick = (video)=>{ setCurrentVideo(video); setVideoKey((prevKey)=>prevKey + 1); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#000B18] via-[#001E3C] to-[#003366] text-white font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGgtNnYxMmgtMTJ2NmgxMnYxMmg2di0xMmgxMnYtNmgtMTJ6IiBzdHJva2U9IiMwMGM4ZmYxMCIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9nPjwvc3ZnPg==')] opacity-5", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-[#00c8ff]", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Canvaコース"), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-64", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#00c8ff]", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin fa-3x", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }))) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, error) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row gap-8", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:w-3/4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, currentVideo && /*#__PURE__*/ React.createElement("div", { className: "bg-[#001a33]/80 backdrop-blur rounded-lg overflow-hidden border border-[#00c8ff]/20 mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-w-16 aspect-h-9", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("video", { key: videoKey, src: currentVideo.video_url, controls: true, autoPlay: true, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }, currentVideo.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300", __source: { fileName: "", lineNumber: 74, columnNumber: 21 }, __self: this }, currentVideo.description)))), /*#__PURE__*/ React.createElement("div", { className: "lg:w-1/4", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#001a33]/80 backdrop-blur rounded-lg border border-[#00c8ff]/20 p-4", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, "レッスン一覧"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 max-h-[600px] overflow-y-auto", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, videos.map((video, index)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: `cursor-pointer p-4 rounded-lg transition-all block ${currentVideo?.id === video.id ? "bg-[#00c8ff] text-[#001a33]" : "hover:bg-[#002b4d]"}`, onClick: ()=>handleVideoClick(video), __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 94, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-24 h-16 rounded overflow-hidden", __source: { fileName: "", lineNumber: 95, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail_url, alt: `${video.title}のサムネイル`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 96, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold mb-1", __source: { fileName: "", lineNumber: 103, columnNumber: 27 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-300 mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 27 }, __self: this }, video.description), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-75", __source: { fileName: "", lineNumber: 107, columnNumber: 27 }, __self: this }, new Date(video.upload_date).toLocaleDateString("ja-JP")))))))))))); }