fixed skip clue implimentation

components/TeamList.js

@@ -0,0 +1,109 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function TeamList({ teams, onJoinTeam, onRefresh }) {
+  const [joinCode, setJoinCode] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleJoinTeam = async (e) => {
+    e.preventDefault();
+
+    if (!joinCode.trim()) {
+      setError("Please enter a team code");
+      return;
+    }
+
+    setError("");
+    setLoading(true);
+
+    try {
+      const response = await fetch("/api/teams/join", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: joinCode.trim() }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to join team");
+      }
+
+      // Call the onJoinTeam callback with the joined team
+      if (onJoinTeam) {
+        onJoinTeam(data);
+      }
+
+      // Refresh the team list
+      if (onRefresh) {
+        onRefresh();
+      }
+
+      router.refresh();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="mb-8">
+      <h2 className="text-xl font-bold mb-4">Join Existing Team</h2>
+
+      <form onSubmit={handleJoinTeam} className="mb-6">
+        <div className="mb-4">
+          <label htmlFor="teamCode" className="block text-gray-700 mb-2">
+            Team Code
+          </label>
+          <input
+            type="text"
+            id="teamCode"
+            value={joinCode}
+            onChange={(e) => setJoinCode(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="Enter team code"
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className={`px-4 py-2 rounded text-white ${
+            loading
+              ? "bg-gray-400 cursor-not-allowed"
+              : "bg-blue-500 hover:bg-blue-600"
+          }`}
+        >
+          {loading ? "Joining..." : "Join Team"}
+        </button>
+
+        {error && <p className="text-red-500 mt-2">{error}</p>}
+      </form>
+
+      {teams && teams.length > 0 ? (
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Available Teams:</h3>
+          <ul className="space-y-2">
+            {teams.map((team) => (
+              <li
+                key={team.id}
+                className="border rounded p-3 hover:bg-gray-50 cursor-pointer"
+                onClick={() => setJoinCode(team.code)}
+              >
+                <div className="font-medium">{team.name}</div>
+                <div className="text-sm text-gray-500">Code: {team.code}</div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <p className="text-gray-500">No teams available to join</p>
+      )}
+    </div>
+  );
+}