function NewComponent({ onSubmit, value, onChange, placeholder, buttonText }) { return /*#__PURE__*/ React.createElement("form", { onSubmit: onSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: value, onChange: onChange, placeholder: placeholder, className: "px-4 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent w-full", name: "wordInput", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-6 py-2 bg-gradient-to-br from-purple-600 to-indigo-600 text-white rounded-lg shadow-md hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 focus:ring-offset-purple-900 font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, buttonText)); } function NewComponentStory() { const handleSubmit = (e)=>{ e.preventDefault(); // Handle form submission }; const handleInputChange = (e)=>{ // Handle input change }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { onSubmit: handleSubmit, value: "", onChange: handleInputChange, placeholder: "単語を入力してください", buttonText: "マインドマップを生成", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function WordInputField({ value, onChange, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "inputWord", value: value, onChange: onChange, placeholder: placeholder, className: "w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function WordInputFieldStory() { const [inputWord, setInputWord] = React.useState(""); const handleInputChange = (e)=>{ setInputWord(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WordInputField, { value: inputWord, onChange: handleInputChange, placeholder: "Enter a word", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [inputWord, setInputWord] = React.useState(''); const [relatedWords, setRelatedWords] = React.useState([]); const handleInputChange = (e)=>{ setInputWord(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); const response = await fetch('/api/related-words', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ inputWord }) }); const data = await response.json(); setRelatedWords(data.relatedWords); }; const colors = [ 'from-red-500 to-orange-600', 'from-green-500 to-teal-600', 'from-yellow-500 to-orange-600', 'from-pink-500 to-purple-600' ]; const positions = [ 'top-[100px] left-[100px]', 'bottom-[100px] right-[100px]', 'top-[50px] right-[200px]', 'bottom-[50px] left-[200px]' ]; const sizes = [ 'w-[100px] h-[100px]', 'w-[80px] h-[80px]', 'w-[60px] h-[60px]', 'w-[70px] h-[70px]' ]; const rotations = [ 'rotate-[30deg]', 'rotate-[-30deg]', 'rotate-[60deg]', 'rotate-[-60deg]' ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-gradient-to-br from-blue-900 to-purple-900 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full relative", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-white bg-opacity-10 rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-white text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Pythonで作るTHINKMACHINE風マインドマップ"), /*#__PURE__*/ React.createElement(NewComponent, { onSubmit: handleSubmit, value: inputWord, onChange: handleInputChange, placeholder: "単語を入力してください", buttonText: "マインドマップを生成", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[120px] h-[120px] bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full shadow-lg flex items-center justify-center text-white text-xl font-semibold", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, inputWord), relatedWords.map((word, index)=>{ const color = colors[index % colors.length]; const position = positions[index % positions.length]; const size = sizes[index % sizes.length]; const rotation = rotations[index % rotations.length]; const linePosition = `${positions[index % positions.length]} translate-x-[-50%] translate-y-[-50%] ${rotation}`; const nodeStyle = `${position} ${size} ${color}`; return /*#__PURE__*/ React.createElement(React.Fragment, { key: index, __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute bg-gradient-to-br rounded-full shadow-lg flex items-center justify-center text-white animate-float ${nodeStyle}`, __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, word), /*#__PURE__*/ React.createElement("div", { className: `absolute bg-white transform origin-left ${linePosition}`, style: { width: '300px', height: '2px' }, __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this })); }))))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 85, columnNumber: 1 }, __self: this }, ` .animate-float { animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } `);