function MainComponent() { const markets = [ "EC", "金融" ]; const projects = [ "タカミ", "テスト" ]; const [selectedMarket, setSelectedMarket] = React.useState(markets[0]); const [selectedProject, setSelectedProject] = React.useState(projects[0]); const [banners, setBanners] = React.useState(Array.from({ length: 10 }, ()=>({ img: "", catchphrase: "", score: null }))); const [analyzed, setAnalyzed] = React.useState(false); const handleMarketChange = (market)=>setSelectedMarket(market); const handleProjectChange = (event)=>setSelectedProject(event.target.value); const handleUpload = (index, event)=>{ const newBanners = [ ...banners ]; newBanners[index].img = URL.createObjectURL(event.target.files[0]); setBanners(newBanners); }; const handleCatchphraseChange = (index, event)=>{ const newBanners = [ ...banners ]; newBanners[index].catchphrase = event.target.value; setBanners(newBanners); }; const handleAnalyze = ()=>{ const newBanners = banners.map((banner)=>({ ...banner, score: Math.floor(Math.random() * 10) + 1 })); setBanners(newBanners); setAnalyzed(true); }; const addBanner = ()=>setBanners([ ...banners, { img: "", catchphrase: "", score: null } ]); const removeBanner = (index)=>setBanners(banners.filter((_, i)=>i !== index)); const getScoreColor = (score)=>{ if (score <= 3) return "text-red-500"; if (score <= 7) return "text-yellow-500"; return "text-blue-500"; }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 font-roboto rounded-md bg-[#f9fafb]", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "マーケット"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, markets.map((market)=>/*#__PURE__*/ React.createElement("button", { key: market, className: `px-4 py-2 rounded-md ${market === selectedMarket ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"}`, onClick: ()=>handleMarketChange(market), __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, market)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "案件"), /*#__PURE__*/ React.createElement("select", { name: "project", className: "w-full p-2 rounded-md border border-gray-300", value: selectedProject, onChange: handleProjectChange, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, projects.map((project)=>/*#__PURE__*/ React.createElement("option", { key: project, value: project, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, project)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "バナーエリア"), banners.map((banner, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 p-4 rounded-md bg-white shadow-md relative", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: `banner-upload-${index}`, className: "w-full mb-2", onChange: (e)=>handleUpload(index, e), __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), banner.img && /*#__PURE__*/ React.createElement("img", { src: banner.img, alt: `バナー画像 ${index + 1}`, className: "w-[100px] h-[100px] mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 28 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `banner-catchphrase-${index}`, className: "w-[400px] p-2 mb-2 rounded-md border border-gray-300", placeholder: "キャッチコピー", value: banner.catchphrase, onChange: (e)=>handleCatchphraseChange(index, e), __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }), analyzed && /*#__PURE__*/ React.createElement("div", { className: `absolute top-2 right-2 p-2 rounded-md bg-white shadow-md ${getScoreColor(banner.score)}`, __source: { fileName: "", lineNumber: 69, columnNumber: 26 }, __self: this }, banner.score), /*#__PURE__*/ React.createElement("button", { className: "absolute bottom-2 right-2 p-1 bg-red-500 text-white rounded-full", onClick: ()=>removeBanner(index), __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 mt-4 bg-green-500 text-white rounded-md", onClick: addBanner, __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "バナー追加")), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 bg-blue-500 text-white rounded-md", onClick: handleAnalyze, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, "分析")); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "p-6 w-[1151px]", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 88, columnNumber: 43 }, __self: this })); }