fixed skip clue implimentation

components/CreateTeamForm.js

@@ -0,0 +1,56 @@
+"use client";
+import { useState } from "react";
+
+export default function CreateTeamForm({ onSubmit }) {
+  const [name, setName] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!name.trim()) {
+      return; // Don't submit if name is empty
+    }
+
+    setSubmitting(true);
+
+    try {
+      await onSubmit({ name });
+    } catch (error) {
+      console.error("Error submitting form:", error);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="mb-6">
+      <div className="mb-4">
+        <label htmlFor="teamName" className="block text-gray-700 mb-2">
+          Team Name
+        </label>
+        <input
+          type="text"
+          id="teamName"
+          value={name}
+          onChange={(e) => setName(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 name"
+          required
+        />
+      </div>
+
+      <button
+        type="submit"
+        disabled={submitting}
+        className={`px-4 py-2 rounded text-white ${
+          submitting
+            ? "bg-gray-400 cursor-not-allowed"
+            : "bg-blue-500 hover:bg-blue-600"
+        }`}
+      >
+        {submitting ? "Creating..." : "Create Team"}
+      </button>
+    </form>
+  );
+}