Split the file.

src/App.jsx

@@ -1,89 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import PocketBase from 'pocketbase';
-import { useParams, BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
-
-const pb = new PocketBase('https://db.out.jafre.li');
-
-const Home = () => {
-    const [message, setMessage] = useState('');
-    const [submitted, setSubmitted] = useState(false);
-    const [error, setError] = useState(null);
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            const data = { message };
-            const record = await pb.collection('jbin').create(data);
-            setSubmitted(record.id);
-        } catch (err) {
-            setError('Fehler beim Erstellen der Nachricht');
-        }
-    };
-
-    return (
-        <div className="flex flex-col items-center p-4">
-            <h1 className="text-2xl font-bold mb-4">Nachricht erstellen</h1>
-            <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-md">
-                <textarea
-                    className="p-2 border rounded-xl w-full"
-                    placeholder="Nachricht hier eingeben..."
-                    value={message}
-                    onChange={(e) => setMessage(e.target.value)}
-                    required
-                ></textarea>
-                <button type="submit" className="bg-blue-500 text-white py-2 rounded-xl hover:bg-blue-600">
-                    Nachricht posten
-                </button>
-            </form>
-            {submitted && (
-                <p className="mt-4 text-green-500">
-                    Nachricht erstellt! Schaue sie dir hier an: <Link to={`/${submitted}`} className="text-blue-500 underline">/{submitted}</Link>
-                </p>
-            )}
-            {error && <p className="mt-4 text-red-500">{error}</p>}
-        </div>
-    );
-};
-
-const Message = () => {
-    const { id } = useParams();
-    const [message, setMessage] = useState(null);
-    const [error, setError] = useState(null);
-
-    useEffect(() => {
-        const fetchMessage = async () => {
-            try {
-                const record = await pb.collection('jbin').getOne(id);
-                setMessage(record.message);
-            } catch (err) {
-                setError('Nachricht nicht gefunden');
-            }
-        };
-
-        fetchMessage();
-    }, [id]);
-
-    return (
-        <div className="flex flex-col items-center p-4">
-            {error ? (
-                <h1 className="text-xl font-bold text-red-500">{error}</h1>
-            ) : message ? (
-                <>
-                    <h1 className="text-2xl font-bold mb-4">Nachricht</h1>
-                    <p className="p-4 border rounded-xl bg-gray-100 w-full max-w-md">{message}</p>
-                </>
-            ) : (
-                <p className="text-gray-500">Lädt...</p>
-            )}
-            <Link to="/" className="mt-4">
-                <button className="bg-blue-500 text-white py-2 px-4 rounded-xl hover:bg-blue-600">
-                    Neue Nachricht
-                </button>
-            </Link>
-        </div>
-    );
-};
-
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Home from './components/Home';
+import Message from './components/Message';
 
 const App = () => {
     return (
@@ -96,4 +14,4 @@ const App = () => {
     );
 };
 
-export default App;
+export default App;

src/components/Home.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import PocketBase from 'pocketbase';
+import MessageForm from './MessageForm';
+
+const pb = new PocketBase('https://db.out.jafre.li');
+
+const Home = () => {
+    const [submitted, setSubmitted] = useState(false);
+    const [error, setError] = useState(null);
+
+    const handleSubmit = async (message) => {
+        try {
+            const data = { message };
+            const record = await pb.collection('jbin').create(data);
+            setSubmitted(record.id);
+        } catch (err) {
+            setError('Fehler beim Erstellen der Nachricht');
+        }
+    };
+
+    return (
+        <div className="flex flex-col items-center p-4">
+            <h1 className="text-2xl font-bold mb-4">Nachricht erstellen</h1>
+            <MessageForm onSubmit={handleSubmit} />
+            {submitted && (
+                <p className="mt-4 text-green-500">
+                    Nachricht erstellt! Schaue sie dir hier an: <Link to={`/${submitted}`} className="text-blue-500 underline">/{submitted}</Link>
+                </p>
+            )}
+            {error && <p className="mt-4 text-red-500">{error}</p>}
+        </div>
+    );
+};
+
+export default Home;

src/components/MesageForm.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+const MessageForm = ({ onSubmit }) => {
+    const [message, setMessage] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(message);
+        setMessage('');
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-md">
+            <textarea
+                className="p-2 border rounded-xl w-full"
+                placeholder="Nachricht hier eingeben..."
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                required
+            ></textarea>
+            <button type="submit" className="bg-blue-500 text-white py-2 rounded-xl hover:bg-blue-600">
+                Nachricht posten
+            </button>
+        </form>
+    );
+};
+
+export default MessageForm;

src/components/Message.jsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import PocketBase from 'pocketbase';
+import { useParams, Link } from 'react-router-dom';
+
+const pb = new PocketBase('https://db.out.jafre.li');
+
+const Message = () => {
+    const { id } = useParams();
+    const [message, setMessage] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchMessage = async () => {
+            try {
+                const record = await pb.collection('jbin').getOne(id);
+                setMessage(record.message);
+            } catch (err) {
+                setError('Nachricht nicht gefunden');
+            }
+        };
+
+        fetchMessage();
+    }, [id]);
+
+    return (
+        <div className="flex flex-col items-center p-4">
+            {error ? (
+                <h1 className="text-xl font-bold text-red-500">{error}</h1>
+            ) : message ? (
+                <>
+                    <h1 className="text-2xl font-bold mb-4">Nachricht</h1>
+                    <p className="p-4 border rounded-xl bg-gray-100 w-full max-w-md">{message}</p>
+                </>
+            ) : (
+                <p className="text-gray-500">Lädt...</p>
+            )}
+            <Link to="/" className="mt-4">
+                <button className="bg-blue-500 text-white py-2 px-4 rounded-xl hover:bg-blue-600">
+                    Neue Nachricht
+                </button>
+            </Link>
+        </div>
+    );
+};
+
+export default Message;