add functionality to the interface

package.json

@@ -8,7 +8,8 @@
     "build": "tsc -b && vite build",
     "preview": "vite preview",
     "css:dev": "tailwindcss -i src/input.css -o output/output.css --watch",
-    "build:css": "tailwindcss -i src/input.css -o output/output.css"
+    "build:css": "tailwindcss -i src/input.css -o output/output.css",
+    "start": "cd server && python app.py"
   },
   "dependencies": {
     "solid-js": "^1.9.1"

src/Home/index.tsx

@@ -1,20 +1,40 @@
+import { createSignal } from 'solid-js'
 import './style.css'
 
 
+
+interface ITranslation { 
+    originalText: string
+    translatedText?: string
+}
+
 export default function App() { 
+    const [ translation, setTranslation ] = createSignal<ITranslation | null>(null)
+    let textarea: HTMLTextAreaElement | undefined
+
+    async function fetchData(text: string) { 
+      if (text === translation()?.translatedText || !text) { return }
+      const response = await fetch(`/api/translate?text=${text}`, { method: "POST" }).then(response => { 
+          if (response.status === 200) { return response.json() }
+  
+      }).then(response => response?.[0])
+      .catch(() => null)
+  
+      setTranslation({ originalText: text, translatedText: response })
+  }
 
-  return (
-    <main class="w-screen my-24 mx-5">
-      <div class="w-1/2 p-3 flex justify-end">
-        <button>Translate</button>
-      </div>
-      <section class="flex">
-          {/* amber-500 */}
-          <textarea class="h-64 p-2 w-1/2 bg-zinc-700" placeholder="Insert input text..." />
-          <textarea class="h-64 p-7 w-1/2 text-2xl" placeholder='Translation' readonly />
-      </section>
-    </main>
-  )
+    return (
+      <main class="w-screen my-24 mx-5">
+        <div class="w-1/2 p-3 flex justify-end">
+          <button onclick={() => fetchData(textarea?.value as string)}>Translate</button>
+        </div>
+        <section class="flex">
+            {/* amber-500 */}
+            <textarea class="h-64 p-2 w-1/2 bg-zinc-700" placeholder="Insert input text..." ref={textarea} />
+            <textarea class="h-64 p-7 w-1/2 text-2xl" placeholder='Translation' readonly value={translation()?.translatedText} />
+        </section>
+      </main>
+    )
 }