redo of entire app

app/(main)/team-selection/page.js

@@ -0,0 +1,40 @@
+'use client'; // Mark as a Client Component
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { query } from '../../../lib/db';
+
+export default function TeamSelection() {
+    const [teamCode, setTeamCode] = useState('');
+    const [error, setError] = useState('');
+    const router = useRouter();
+
+    const handleJoinTeam = async (e) => {
+        e.preventDefault();
+        const team = await query('SELECT * FROM teams WHERE code = ?', [teamCode]);
+        if (team) {
+            router.push(`/stats/${team.id}`);
+        } else {
+            setError('Team not found');
+        }
+    };
+
+    return (
+        <div>
+            <h1>Team Selection</h1>
+            <form onSubmit={handleJoinTeam}>
+                <input
+                    type="text"
+                    placeholder="Team Code"
+                    value={teamCode}
+                    onChange={(e) => setTeamCode(e.target.value)}
+                    required
+                />
+                <button type="submit">Join Team</button>
+            </form>
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            <p>
+                <a href="/create-team">Create a new team</a>
+            </p>
+        </div>
+    );
+}