function MainComponent() { const [inputText, setInputText] = useState(""); const [keywords, setKeywords] = useState([]); const [visualDescriptions, setVisualDescriptions] = useState([]); const [colorSchemes, setColorSchemes] = useState([]); const resetAll = useCallback(()=>{ setInputText(""); setKeywords([]); setVisualDescriptions([]); setColorSchemes([]); }, []); const analyzeText = useCallback(()=>{ if (!inputText) return; const sampleKeywords = [ "情熱", "活力", "エネルギー", "前進", "挑戦", "成長", "希望", "未来", "可能性", "発展" ]; const sampleDescriptions = [ "燃え上がる赤い炎のイメージ", "躍動する波のような曲線", "放射状に広がる光線", "上昇する矢印や階段", "高く伸びる新芽", "螺旋状に展開する形", "明るい光に包まれた風景", "広がる地平線と朝日", "無限の空間を表現する点と線", "複数の要素が調和する幾何学模様" ]; const sampleColorSchemes = [ { main: "#FF4B4B", accent: "#FFD700", text: "#2C3E50" }, { main: "#4B89FF", accent: "#50E3C2", text: "#2C3E50" }, { main: "#9B51E0", accent: "#FF9B51", text: "#2C3E50" }, { main: "#50E3C2", accent: "#4B89FF", text: "#2C3E50" }, { main: "#FF9B51", accent: "#9B51E0", text: "#2C3E50" } ]; setKeywords(sampleKeywords); setVisualDescriptions(sampleDescriptions); setColorSchemes(sampleColorSchemes); }, [ inputText ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8 font-noto-sans", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800 mb-6", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "サムネイル連想ジェネレーター"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "thumbnailText", value: inputText, onChange: (e)=>setInputText(e.target.value), placeholder: "サムネイルの文言を入力してください", className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: analyzeText, className: "bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition duration-200", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "分析する"), /*#__PURE__*/ React.createElement("button", { onClick: resetAll, className: "bg-gray-600 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition duration-200", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "リセット"))), keywords.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-800 mb-3", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "連想キーワード"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, keywords.map((keyword, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, keyword)))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-800 mb-3", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "視覚的表現"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, visualDescriptions.map((desc, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this }, index + 1, ". ", desc))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-800 mb-3", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "カラースキーム"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, colorSchemes.map((scheme, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col space-y-3 bg-white p-4 rounded-lg border border-gray-200", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 130, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full", style: { backgroundColor: scheme.main }, __source: { fileName: "", lineNumber: 131, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full", style: { backgroundColor: scheme.accent }, __source: { fileName: "", lineNumber: 135, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full", style: { backgroundColor: scheme.text }, __source: { fileName: "", lineNumber: 139, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 145, columnNumber: 23 }, __self: this }, "メインカラー: ", scheme.main), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 146, columnNumber: 23 }, __self: this }, "アクセントカラー: ", scheme.accent), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }, "テキストカラー: ", scheme.text)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, index === 0 && "情熱と活力を表現する赤と、希望を象徴する金色の組み合わせ", index === 1 && "信頼性を表す青と、新鮮さを表す青緑のさわやかな組み合わせ", index === 2 && "創造性を表す紫と、温かみのあるオレンジの調和", index === 3 && "成長を表す青緑と、安定感のある青の組み合わせ", index === 4 && "エネルギッシュなオレンジと、高貴な紫の対比的な組み合わせ")))))))); }