function LanguageSwitchButton({ language, onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "ml-auto bg-[#4CAF50] text-white px-4 py-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, language === 'JP' ? 'EN' : 'JP'); } function LanguageSwitchButtonStory() { const [language, setLanguage] = React.useState('EN'); const toggleLanguage = ()=>{ setLanguage(language === 'EN' ? 'JP' : 'EN'); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LanguageSwitchButton, { language: language, onClick: toggleLanguage, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [language, setLanguage] = React.useState("JP"); const [showMenu, setShowMenu] = React.useState(false); const handleLanguageChange = ()=>{ setLanguage((prevLang)=>prevLang === "JP" ? "EN" : "JP"); }; const toggleMenu = ()=>{ setShowMenu(!showMenu); }; const playlist = [ { id: "qfw9z5rLmm4", titleJP: "動画1", titleEN: "Video 1", channelName: "Channel 1", views: "1M", date: "1 Jan 2020" }, { id: "W6NZfCO5SIk", titleJP: "動画2", titleEN: "Video 2", channelName: "Channel 2", views: "2M", date: "2 Feb 2021" }, { id: "XsX3ATc3FbA", titleJP: "動画3", titleEN: "Video 3", channelName: "Channel 3", views: "3M", date: "3 Mar 2022" }, { id: "4m5KrPXL4wI", titleJP: "動画4", titleEN: "Video 4", channelName: "Channel 4", views: "4M", date: "4 Apr 2023" }, { id: "5gF4tyf-zVo", titleJP: "動画5", titleEN: "Video 5", channelName: "Channel 5", views: "5M", date: "5 May 2024" }, { id: "6a_ItpjYZPE", titleJP: "動画6", titleEN: "Video 6", channelName: "Channel 6", views: "6M", date: "6 Jun 2025" }, { id: "7bVHxj2bnvQ", titleJP: "動画7", titleEN: "Video 7", channelName: "Channel 7", views: "7M", date: "7 Jul 2026" }, { id: "8cLfXn8xVng", titleJP: "動画8", titleEN: "Video 8", channelName: "Channel 8", views: "8M", date: "8 Aug 2027" }, { id: "9dQ9zCumfyw", titleJP: "動画9", titleEN: "Video 9", channelName: "Channel 9", views: "9M", date: "9 Sep 2028" }, { id: "10fDP_eYqQY", titleJP: "動画10", titleEN: "Video 10", channelName: "Channel 10", views: "10M", date: "10 Oct 2029" } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#F9F9F9] p-8 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 p-4 z-50", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMenu, className: "text-[#333] text-xl", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "☰"), showMenu && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-4 mt-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#333]", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Menu Item 1"), /*#__PURE__*/ React.createElement("p", { className: "text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Menu Item 2"), /*#__PURE__*/ React.createElement("p", { className: "text-[#333]", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Menu Item 3"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-8", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(LanguageSwitchButton, { language: language, onClick: handleLanguageChange, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, playlist.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "bg-white shadow-md rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://img.youtube.com/vi/${video.id}/0.jpg`, alt: `${language === "JP" ? video.titleJP : video.titleEN} thumbnail`, className: "w-full cursor-pointer", onClick: ()=>window.open(`https://www.youtube.com/watch?v=${video.id}`, "_blank"), __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#333] font-semibold", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, language === "JP" ? video.titleJP : video.titleEN), /*#__PURE__*/ React.createElement("p", { className: "text-[#666] text-sm mt-1", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, video.channelName), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-[#999] text-sm mt-2", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, video.views, " views"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, video.date))))))); }