added find teams ui

app/api/teams/get-teams/route.jsx

@@ -0,0 +1,14 @@
+import dbConnect from "../../../../lib/dbConnect";
+import { TeamModel } from "../../../../model/Team";
+
+export async function GET() {
+    await dbConnect();
+
+    try {
+        const teams = await TeamModel.find();
+        return new Response(JSON.stringify({ success: true, teams }), { status: 200 });
+    } catch (error) {
+        console.error('Error fetching teams:', error);
+        return new Response(JSON.stringify({ success: false, message: 'Error fetching teams' }), { status: 500 });
+    }
+}

app/teams/page.jsx

@@ -0,0 +1,65 @@
+'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';
+
+
+const TeamFinder = () => {
+
+  const router = useRouter();
+  const [teams, setTeams] = useState([]);
+
+  useEffect(() => {
+    const fetchTeams = async () => {
+      try {
+        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);
+        }
+      } catch (error) {
+        console.error('Error fetching teams:', error);
+      }
+    };
+
+    fetchTeams();
+  }, []);
+
+
+  const NavigateToCreateTeam = () => {
+    router.push('/create-team');
+  };
+
+
+  return (
+    <div className="p-4">
+      <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" />
+        <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="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>
+            </div>
+          </div>
+          {teams.map((team, index) => (
+            <TeamCard key={index} team={team} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamFinder;

components/FiltersSidebar.jsx

@@ -0,0 +1,30 @@
+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 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>
+      </div>
+      <div className="mb-4">
+        <label className="block mb-2">Role</label>
+        <select className="w-full p-2 bg-gray-700 text-white">
+          <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>
+      </div>
+      <button className="w-full mt-5 p-2 bg-indigo-400 text-white rounded-md">Apply</button>
+    </div>
+  );
+};
+
+export default FiltersSidebar;

components/Navbar.jsx

@@ -107,7 +107,10 @@ const navLinks = [
     title: "Games",
     href: "/games",
   },
-
+  {
+    title: "Teams",
+    href: "/teams",
+  },
   {
     title: "Blogs",
     href: "/blogs",

components/TeamCard.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+const TeamCard = ({ team }) => {
+  return (
+    <div className="p-4 bg-slate-800 text-white mb-4 rounded-md">
+      <div className='border-b-4 border-b-stone-600'>
+        <div className="flex justify-between items-center mb-5">
+          <div className="flex items-center">
+            <img 
+              src={team.image || 'https://via.placeholder.com/40'} 
+              alt={`${team.name} logo`} 
+              className="w-10 h-10 rounded-full mr-4" 
+            />
+            <h3 className="text-xl">{team.teamname}</h3>
+          </div>
+          <button className="bg-transparent border-2 border-blue-800 px-4 py-2 rounded hidden md:block">Request to join</button>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-x-4 my-5">
+        <div className='my-2'>
+          <span className="text-yellow-500">Game</span>
+          <span className="block">{team.game}</span>
+        </div>
+        <div className='my-2'>
+          <span className="text-yellow-500">Role</span>
+          <span className="block">{team.role}</span>
+        </div>
+        <div className='my-2'>
+          <span className="text-yellow-500">Rank</span>
+          <span className="block">{team.rank}</span>
+        </div>
+        <div className='my-2'>
+          <span className="text-yellow-500">Server</span>
+          <span className="block">{team.server}</span>
+        </div>
+        <div className='my-2'>
+          <span className="text-yellow-500">Language</span>
+          <span className="block">{team.language}</span>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-x-4 my-5">
+        <div className='my-2'>
+          <span className="text-yellow-500">Players</span>
+          <span className="block">{team.players.join(', ')}</span>
+        </div>
+        <div className='my-2'>
+          <span className="text-yellow-500">Looking for</span>
+          <span className="block">{team.requests}</span>
+        </div>
+      </div>
+      <div className="flex justify-center md:hidden">
+        <button className="bg-transparent border-2 border-blue-800 px-4 py-2 rounded">Request to join</button>
+      </div>
+    </div>
+  );
+};
+
+export default TeamCard;

model/Schema/teamSchema.js

@@ -1,13 +1,12 @@
 import { z } from 'zod';
 
 export const teamSchema = z.object({
-    teamname: z.string(),
-    game: z.string(),
-    role: z.string(),
-    rank: z.string(),
-    server: z.string(),
-    language: z.string(),
-    players: z.string(),
-    requests: z.string(),
-
-});
+    teamname: z.string().min(4, { message: 'Team name must be at least 4 characters long' }),
+    game: z.string().min(4, { message: 'Game name must be at least 4 characters long' }),
+    role: z.string().min(4, { message: 'Role must be at least 4 characters long' }),
+    rank: z.string().min(4, { message: 'Rank must be at least 4 characters long' }),
+    server: z.string().min(4, { message: 'Server must be at least 4 characters long' }),
+    language: z.string().min(4, { message: 'Language must be at least 4 characters long' }),
+    players: z.string().min(4, { message: 'Players field must be at least 4 characters long' }),
+    requests: z.string().min(4, { message: 'Requests field must be at least 4 characters long' }),
+});

model/Team.js

@@ -8,8 +8,8 @@ const TeamSchema = new mongoose.Schema({
   rank: { type: String, required: true },
   server: { type: String, required: true },
   language: { type: String, required: true },
-  players: [{ type: String }],
-  requests: [{ type: String }]
+  players: [{ type: String, required: true }],
+  requests: { type: String, required: true }
 });
 
 

prisma/seed.js

@@ -170,26 +170,26 @@ async function main() {
   // seed Team (mongoose)
   const teamData = [
     {
-      image: 'https://example.com/image1.jpg',
+      image: 'https://placehold.co/60',
       teamname: 'Epic Warriors',
       game: 'League of Legends',
       role: 'ADC',
       rank: 'Diamond',
       server: 'NA',
       language: 'English',
       players: ['Player1', 'Player2'],
-      requests: ['No toxic behavior', 'Must have a mic']
+      requests: 'No toxic behavior'
     },
     {
-      image: 'https://example.com/image2.jpg',
+      image: 'https://placehold.co/60',
       teamname: 'Pro Gamers',
       game: 'CS:GO',
       role: 'In-Game Leader',
       rank: 'Global Elite',
       server: 'EU',
       language: 'English',
       players: ['Player3', 'Player4'],
-      requests: ['Good communication skills', 'Must be punctual']
+      requests: 'Good communication skills and has to be punctual'
     }
   ];