From f63b3eaf601ce70fe0c8988992a421026ba51423 Mon Sep 17 00:00:00 2001
From: Abhishek <abhishekbhosale.dev@gmail.com>
Date: Sun, 25 Aug 2024 16:36:56 +0530
Subject: [PATCH] style: teams page

improved ui of /teams page
---
 app/teams/page.jsx            |  12 ++--
 components/FiltersSidebar.jsx | 104 +++++++++++++++++-----------------
 2 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/app/teams/page.jsx b/app/teams/page.jsx
index a50a5c1..acc6272 100644
--- a/app/teams/page.jsx
+++ b/app/teams/page.jsx
@@ -40,15 +40,13 @@ const TeamFinder = () => {
   };
 
   return (
-    <div className="mt-20 px-10 xl:px-[12%] min-h-[70vh]">
+    <div className="mt-20 px-5 md:px-10 xl:px-[12%] min-h-[70vh] transition-all">
       <h1 className="text-3xl ml-4 mb-14 font-semibold tracking-tight">
         Team Finder
       </h1>
 
-      <div className="mx-5 p-2 grid grid-cols-1 lg:grid-cols-10 overflow-hidden">
-        <FiltersSidebar className="" />
-
-        <Card className="mt-5 lg:mt-0 lg:ml-5 col-span-1 lg:col-span-7">
+      <div className="mx-5 p-2 grid gap-5 grid-cols-1 lg:grid-cols-10 overflow-hidden transition-all">
+        <Card className="mt-5 lg:mt-0 lg:ml-5 col-span-1 lg:col-span-7 transition-all">
           <CardHeader className="flex flex-col gap-5">
             <CardTitle className="flex items-center justify-between">
               <h2 className="text-2xl">Find Team</h2>
@@ -74,12 +72,14 @@ const TeamFinder = () => {
             </div>
           </CardHeader>
 
-          <CardContent className="min-h-80 lg:h-full border-t">
+          <CardContent className="min-h-80 lg:h-full border-t pt-5 transition-all">
             {teams.map((team, index) => (
               <TeamCard key={index} team={team} />
             ))}
           </CardContent>
         </Card>
+
+        <FiltersSidebar className="" />
       </div>
     </div>
   );
diff --git a/components/FiltersSidebar.jsx b/components/FiltersSidebar.jsx
index c9aeb49..ac2876f 100644
--- a/components/FiltersSidebar.jsx
+++ b/components/FiltersSidebar.jsx
@@ -1,57 +1,59 @@
-import React from "react";
+import { Button } from "../@/components/ui/button";
 
 const FiltersSidebar = () => {
   return (
-    <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 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 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 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-600 text-white rounded-md">
-        Apply
-      </button>
+    <div class="p-4 rounded-lg col-span-1 lg:col-span-3 h-fit border shadow transition-all">
+      <form>
+        <div class="flex justify-between items-center mb-4">
+          <div className="flex justify-between items-center w-full">
+            <div class="text-xl font-semibold">Filters</div>
+            <Button variant="outline" className="transition-all">
+              <input type="reset" value="Reset" className="cursor-pointer" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="mb-4">
+          <label className="block mb-2">Game</label>
+          <select className="w-full p-2 rounded-md bg-background border">
+            <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 rounded-md bg-background border">
+            <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 rounded-md bg-background border">
+            <option selected>Select Language</option>
+            <option>English</option>
+            <option>Hindi</option>
+          </select>
+        </div>
+
+        <Button className="w-full mt-5">Apply</Button>
       </form>
     </div>
   );