From 249d7fca708943b08e4a1ca349c69bd673ecb8d5 Mon Sep 17 00:00:00 2001
From: Abhishek <abhishekbhosale.dev@gmail.com>
Date: Mon, 5 Aug 2024 00:27:41 +0530
Subject: [PATCH] style: teams page

improved the styling of the /teams page
---
 app/page.js           |  6 +--
 app/teams/page.jsx    | 87 +++++++++++++++++++++++++++----------------
 components/Footer.jsx |  2 +-
 components/Navbar.jsx |  8 ++--
 4 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/app/page.js b/app/page.js
index 0807ce1..768f619 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,7 +1,7 @@
 import HeroSection from "../components/HeroSection";
-// import FeatureSection from "../components/FeatureSection/FeatureSection";
+import FeatureSection from "../components/FeatureSection/FeatureSection";
 import FaqSection from "../components/FaqSection";
-import { prefetchTournaments } from '../lib/prefetchTournaments';
+import { prefetchTournaments } from "../lib/prefetchTournaments";
 
 export default async function Home() {
   // Prefetch tournaments data
@@ -10,7 +10,7 @@ export default async function Home() {
   return (
     <main className="">
       <HeroSection />
-      {/* <FeatureSection /> */}
+      <FeatureSection />
       <FaqSection />
     </main>
   );
diff --git a/app/teams/page.jsx b/app/teams/page.jsx
index a63bbea..2beeb72 100644
--- a/app/teams/page.jsx
+++ b/app/teams/page.jsx
@@ -1,62 +1,85 @@
-'use client'
-
-import React from 'react';
-import FiltersSidebar from '../../components/FiltersSidebar';
-import TeamCard from '../../components/TeamCard';
-import { useRouter } from 'next/navigation';
-import { useState, useEffect } from 'react';
-import axios from 'axios';
+"use client";
 
+import React from "react";
+import FiltersSidebar from "../../components/FiltersSidebar";
+import TeamCard from "../../components/TeamCard";
+import { useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../@/components/ui/card";
+import { Button } from "../../@/components/ui/button";
 
 const TeamFinder = () => {
-
   const router = useRouter();
   const [teams, setTeams] = useState([]);
 
   useEffect(() => {
     const fetchTeams = async () => {
       try {
-        const response = await axios.get('/api/teams/get-teams');
+        const response = await axios.get("/api/teams/get-teams");
         if (response.data.success) {
           setTeams(response.data.teams);
         } else {
-          console.error('Failed to fetch teams:', response.data.message);
+          console.error("Failed to fetch teams:", response.data.message);
         }
       } catch (error) {
-        console.error('Error fetching teams:', error);
+        console.error("Error fetching teams:", error);
       }
     };
 
     fetchTeams();
   }, []);
 
-
   const NavigateToCreateTeam = () => {
-    router.push('/create-team');
+    router.push("/create-team");
   };
 
-
   return (
-    <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-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 m mb-4">
-            <div className="flex justify-between mb-4">
+    <div className="mt-20 px-10 xl:px-[12%] min-h-[70vh]">
+      <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">
+          <CardHeader className="flex flex-col gap-5">
+            <CardTitle className="flex items-center justify-between">
               <h2 className="text-2xl">Find Team</h2>
-              <button className="bg-orange-500 px-4 py-2 rounded" onClick={NavigateToCreateTeam}>Create Team</button>
-            </div>
+              <Button
+                // variant="outline"
+                className=""
+                onClick={NavigateToCreateTeam}
+              >
+                Create Team
+              </Button>
+            </CardTitle>
+
             <div className="mb-4 flex flex-wrap gap-2 justify-between">
-              <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>
+              <Button variant="outline" className="px-4 py-2 rounded text-sm">
+                Request Raised
+              </Button>
+              <Button variant="outline" className="px-4 py-2 rounded text-sm">
+                Request Sent
+              </Button>
+              <Button variant="outline" className="px-4 py-2 rounded text-sm">
+                + New Request
+              </Button>
             </div>
-          </div>
-          {teams.map((team, index) => (
-            <TeamCard key={index} team={team} />
-          ))}
-        </div>
+          </CardHeader>
+
+          <CardContent className="min-h-80 lg:h-full border-t">
+            {teams.map((team, index) => (
+              <TeamCard key={index} team={team} />
+            ))}
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
diff --git a/components/Footer.jsx b/components/Footer.jsx
index fe57563..d1e71cb 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -30,7 +30,7 @@ const socialLinks = [
 
 export default function Footer() {
   return (
-    <div className="grid grid-cols-1 px-[5%] mt-40 pt-10 md:px-[10%] lg:px-[20%] shadow-sm border-t transition-all">
+    <div className="grid grid-cols-1 px-10 mt-40 pt-10 md:px-[10%] lg:px-[20%] shadow-sm border-t transition-all">
       <div className="flex flex-col md:flex-row gap-20 justify-between transition-all">
         {/* main sec */}
         <div className="flex flex-col">
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index c441ea5..0e44e6d 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -59,7 +59,9 @@ const Navbar = () => {
               width={30}
               className="rounded"
             />
-            <h1 className="text-2xl font-semibold mt-1">Sanity Gaming</h1>
+            <h1 className="text-2xl font-semibold tracking-tight mt-1">
+              Sanity Gaming
+            </h1>
           </Link>
         </div>
 
@@ -69,8 +71,8 @@ const Navbar = () => {
             <Link
               key={index}
               href={item.href}
-              className={`font-medium hover:text-foreground/80 transition-all
-                ${isActive(pathname, item.href) ? "text-foreground" : "text-foreground/60"}
+              className={`font-medium hover:text-foreground/90 transition-all
+                ${isActive(pathname, item.href) ? "text-foreground" : "text-foreground/70"}
               `}
             >
               {item.title}