Teams form Changes

dinxsh · Aug 4, 2024 · b0bdea2 · b0bdea2
1 parent 647234e
commit b0bdea2
Show file tree

Hide file tree

Showing 4 changed files with 291 additions and 163 deletions.
diff --git a/app/teams/page.jsx b/app/teams/page.jsx
@@ -37,20 +37,20 @@ const TeamFinder = () => {
 
 
   return (
-    <div className="p-4">
+    <div className="md:p-4 md:mx-14 mx-7">
       <p className="text-2xl ml-4 mb-4 font-semibold tracking-wide">TEAM FINDER</p>
       <div className="grid grid-cols-1 md:grid-cols-5 gap-x-4 overflow-hidden mx-4">
-        <FiltersSidebar className="rounded-lg mb-4 md:mb-0" />
+        <FiltersSidebar className="rounded-lg mb-20px" />
         <div className="overflow-y-auto p-4 bg-gray-900 text-white col-span-1 md:col-span-4 rounded-lg">
-          <div className="border-b-4 mb-4">
+          <div className="border-b-4 m mb-4">
             <div className="flex justify-between mb-4">
               <h2 className="text-2xl">Find Team</h2>
               <button className="bg-orange-500 px-4 py-2 rounded" onClick={NavigateToCreateTeam}>Create Team</button>
             </div>
             <div className="mb-4 flex flex-wrap gap-2 justify-between">
-              <button className="bg-indigo-400 px-4 py-2 rounded text-sm">Request Raised</button>
-              <button className="bg-indigo-400 px-4 py-2 rounded text-sm">Request Sent</button>
-              <button className="bg-indigo-400 px-4 py-2 rounded text-sm">+ New Request</button>
+              <button className="bg-indigo-600 px-4 py-2 rounded text-sm">Request Raised</button>
+              <button className="bg-indigo-600 px-4 py-2 rounded text-sm">Request Sent</button>
+              <button className="bg-indigo-600 px-4 py-2 rounded text-sm">+ New Request</button>
             </div>
           </div>
           {teams.map((team, index) => (

diff --git a/components/FiltersSidebar.jsx b/components/FiltersSidebar.jsx
@@ -1,30 +1,60 @@
-import React from 'react';
+import React from "react";
 
 const FiltersSidebar = () => {
   return (
-    <div className="p-4 bg-gray-800 text-white rounded-lg">
-      <h2 className="text-xl mb-4">Filters</h2>
+    <div class="bg-gray-800 p-4 rounded-lg "> 
+    <form>
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="text-xl font-semibold text-white">Filters</h2>
+        <button class="bg-gray-800 hover:bg-gray-600 text-white font md:py-2 md:px-4 rounded">
+        <input type="reset" value="Reset" className="cursor-pointer" />
+        </button>
+      </div>
       <div className="mb-4">
         <label className="block mb-2">Game</label>
-        <select className="w-full p-2 bg-gray-700 text-white">
-          <option>Select</option>
+        <select className="w-full p-2 rounded-md bg-gray-600 text-white"  > 
+          <option selected>Select Game</option>
+          <option className="text-sm">BGMI</option>
+          <option className="text-sm">Free Fire Max</option>
+          <option className="text-sm">Valorant</option>
+          <option className="text-sm">COD Mobile</option>
+          <option className="text-sm">Pokemon Unite</option>
+          <option className="text-sm">Clash of Clans</option>
+          <option className="text-sm">Cricket</option>
+          <option className="text-sm">NEW STATE Mobile</option>
+          <option className="text-sm">GTA V</option>
+          <option className="text-sm">League of Legends PC</option>
+          <option className="text-sm">FIFA 22</option>
+          <option className="text-sm">Brawl Stars</option>
+          <option className="text-sm">Apex Legends Mobile</option>
+          <option className="text-sm">Clash Royale</option>
+          <option className="text-sm">Mobile Legends Bang Bang</option>
         </select>
       </div>
       <div className="mb-4">
         <label className="block mb-2">Role</label>
-        <select className="w-full p-2 bg-gray-700 text-white">
+        <select className="w-full p-2 rounded-md bg-gray-600 text-white">
+          <option>Select role</option>
+          <option>Select role</option>
+          <option>Select role</option>
+          <option>Select role</option>
           <option>Select role</option>
         </select>
       </div>
       <div className="mb-4">
         <label className="block mb-2">Language</label>
-        <select className="w-full p-2 bg-gray-700 text-white">
-          <option>Select Language</option>
+        <select className="w-full p-2 rounded-md bg-gray-600 text-white">
+          <option selected>Select Language</option>
+          <option >English</option>
+          <option >Hindi</option>
         </select>
       </div>
-      <button className="w-full mt-5 p-2 bg-indigo-400 text-white rounded-md">Apply</button>
+      <button className="w-full mt-5 p-2 bg-indigo-600 text-white rounded-md">
+        Apply
+      </button>
+      </form>
     </div>
   );
 };
 
-export default FiltersSidebar;
+export default FiltersSidebar;