From f9ced3f4a134ca926469b86504c3b9aaa5b4b12c Mon Sep 17 00:00:00 2001
From: saurabhchaddha6 <saurabhchaddha6@gmail.com>
Date: Sat, 10 Aug 2024 09:45:09 +0530
Subject: [PATCH] update form

---
 app/tournaments/[id]/register/page.js | 178 ++++++++++++++------------
 1 file changed, 93 insertions(+), 85 deletions(-)

diff --git a/app/tournaments/[id]/register/page.js b/app/tournaments/[id]/register/page.js
index 4e3ec6a..586a7a0 100644
--- a/app/tournaments/[id]/register/page.js
+++ b/app/tournaments/[id]/register/page.js
@@ -3,31 +3,27 @@ import { useRouter } from 'next/router';
 import axios from 'axios';
 
 export default function RegisterPage() {
-    const [userData, setUserData] = useState({
-        teamName: '',
-        members: '',
-        email: '',
-        selectedPlatform: '',
-        participantType: '',
-    });
+    const [teamName, setTeamName] = useState('');
+    const [members, setMembers] = useState('');
+    const [email, setEmail] = useState('');
+    const [selectedPlatform, setSelectedPlatform] = useState('');
+    const [participantType, setParticipantType] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const router = useRouter();
     const { id: tournamentId } = router.query;
 
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setUserData((prevData) => ({ ...prevData, [name]: value }));
-    };
-
     const handleSubmit = async (e) => {
         e.preventDefault();
         setIsLoading(true);
         try {
-            const membersArray = userData.members.split(',').map(member => member.trim());
             const response = await axios.post(`/api/register/${tournamentId}`, {
-                ...userData,
-                members: membersArray
+                teamName,
+                members,
+                email,
+                selectedPlatform,
+                participantType
             });
+
             if (response.status === 201) {
                 alert('Registration successful!');
                 router.push(`/tournament/${tournamentId}`);
@@ -43,75 +39,87 @@ export default function RegisterPage() {
     };
 
     return (
-        <div className="container mx-auto px-4 py-8">
-            <h1 className="text-3xl font-bold mb-6">Register for Tournament</h1>
-            <form onSubmit={handleSubmit} className="bg-gray-800 p-6 rounded-lg shadow-lg space-y-4">
-                <div>
-                    <label htmlFor="teamName" className="block text-white mb-2">Team Name</label>
-                    <input
-                        type="text"
-                        id="teamName"
-                        name="teamName"
-                        value={userData.teamName}
-                        onChange={handleChange}
-                        className="w-full p-2 rounded-lg bg-gray-700 text-white"
-                        required
-                    />
-                </div>
-                <div>
-                    <label htmlFor="members" className="block text-white mb-2">Team Members (Comma-separated)</label>
-                    <input
-                        type="text"
-                        id="members"
-                        name="members"
-                        value={userData.members}
-                        onChange={handleChange}
-                        className="w-full p-2 rounded-lg bg-gray-700 text-white"
-                        required
-                    />
-                </div>
-                <div>
-                    <label htmlFor="email" className="block text-white mb-2">Email</label>
-                    <input
-                        type="email"
-                        id="email"
-                        name="email"
-                        value={userData.email}
-                        onChange={handleChange}
-                        className="w-full p-2 rounded-lg bg-gray-700 text-white"
-                        required
-                    />
-                </div>
-                <div>
-                    <label htmlFor="selectedPlatform" className="block text-white mb-2">Selected Platform</label>
-                    <input
-                        type="text"
-                        id="selectedPlatform"
-                        name="selectedPlatform"
-                        value={userData.selectedPlatform}
-                        onChange={handleChange}
-                        className="w-full p-2 rounded-lg bg-gray-700 text-white"
-                    />
-                </div>
-                <div>
-                    <label htmlFor="participantType" className="block text-white mb-2">Participant Type</label>
-                    <input
-                        type="text"
-                        id="participantType"
-                        name="participantType"
-                        value={userData.participantType}
-                        onChange={handleChange}
-                        className="w-full p-2 rounded-lg bg-gray-700 text-white"
-                    />
-                </div>
-                <button
-                    type="submit"
-                    className="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
-                    disabled={isLoading}
-                >
-                    {isLoading ? 'Registering...' : 'Register'}
-                </button>
-            </form>
+        <div className="min-h-screen flex items-center justify-center bg-gray-900">
+            <div className="max-w-lg w-full bg-gray-800 p-8 rounded-lg shadow-lg">
+                <h1 className="text-4xl font-bold text-white mb-8 text-center">Register for Tournament</h1>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                    <div>
+                        <label htmlFor="teamName" className="block text-gray-300 text-sm font-semibold mb-2">
+                            Team Name
+                        </label>
+                        <input
+                            type="text"
+                            id="teamName"
+                            value={teamName}
+                            onChange={(e) => setTeamName(e.target.value)}
+                            className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            placeholder="Enter your team name"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="members" className="block text-gray-300 text-sm font-semibold mb-2">
+                            Team Members (Comma-separated)
+                        </label>
+                        <input
+                            type="text"
+                            id="members"
+                            value={members}
+                            onChange={(e) => setMembers(e.target.value)}
+                            className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            placeholder="Enter team members"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="email" className="block text-gray-300 text-sm font-semibold mb-2">
+                            Email
+                        </label>
+                        <input
+                            type="email"
+                            id="email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            placeholder="Enter your email"
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="selectedPlatform" className="block text-gray-300 text-sm font-semibold mb-2">
+                            Selected Platform
+                        </label>
+                        <input
+                            type="text"
+                            id="selectedPlatform"
+                            value={selectedPlatform}
+                            onChange={(e) => setSelectedPlatform(e.target.value)}
+                            className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            placeholder="Enter the platform (e.g., PC, Console)"
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="participantType" className="block text-gray-300 text-sm font-semibold mb-2">
+                            Participant Type
+                        </label>
+                        <input
+                            type="text"
+                            id="participantType"
+                            value={participantType}
+                            onChange={(e) => setParticipantType(e.target.value)}
+                            className="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            placeholder="Enter the participant type (e.g., Player, Coach)"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        className="w-full bg-blue-600 text-white p-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-500"
+                        disabled={isLoading}
+                    >
+                        {isLoading ? 'Registering...' : 'Register'}
+                    </button>
+                </form>
+            </div>
         </div>
     );
-}
\ No newline at end of file
+}