Teams list

src/app/t/[path]/teams/page.tsx

@@ -1,13 +1,20 @@
+import { TeamsList } from "@/components/team/TeamsList";
+import Link from "next/link";
+
 export default async function TournamentTeamsPage({
   params,
 }: {
   params: Promise<{ path: string }>;
 }) {
   return (
     <>
-      <div className="p-4">
-        <h1 className="text-2xl font-logo mb-6">{`Teams`}</h1>
+      <div className="p-4 flex gap-6 items-center">
+        <h1 className="text-2xl font-logo">{`Teams`}</h1>
+        <div className="w-fit border p-2 border-stone-700/70 rounded">
+          <Link href={`/t/${(await params).path}/teams/create`}>Add</Link>
+        </div>
       </div>
+      <TeamsList tournament_id={(await params).path} />
     </>
   );
 }

src/components/GenericListItem.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { JSX } from "react";
+
+const GenericListItem = ({
+  title,
+  subtitle,
+  href,
+  icon,
+}: {
+  title: string;
+  subtitle?: string;
+  href?: string;
+  icon?: () => JSX.Element;
+}) => {
+  return (
+    <>
+      <div className="relative rounded sm:min-w-3xs lg:w-xl border border-stone-700 bg-cover bg-center overflow-hidden">
+        <Link href={href || ""}>
+          <div className="relative backdrop-blur-xs w-full h-full sm:min-h-14 sm:min-w-lg py-3 px-4 bg-black/75">
+            <h2 className="sm:text-xl font-semibold font-logo">{title}</h2>
+            <p className="text-xs sm:text-base text-stone-300 font-semibold">
+              {subtitle}
+            </p>
+          </div>
+          {icon && icon()}
+        </Link>
+      </div>
+    </>
+  );
+};
+
+export { GenericListItem };

src/components/team/TeamsList.tsx

@@ -0,0 +1,51 @@
+import { fetchServerside } from "@/lib/utils";
+import { Team } from "@/types/Team";
+import { cookies } from "next/headers";
+import { GenericListItem } from "../GenericListItem";
+
+const TeamsList = async ({ tournament_id }: { tournament_id: string }) => {
+  let data_team: Team[] = [];
+  const response = await fetchServerside(`/tournament/${tournament_id}/team`, {
+    headers: {
+      Cookie: (await cookies()).toString(),
+    },
+  });
+  if (response.ok) {
+    data_team = await response.json();
+  }
+
+  return (
+    <div className="px-8 py-12 sm:py-16 lg:px-16 border-t border-b border-stone-700/70 overflow-y-scroll">
+      {data_team.length !== 0 ? (
+        <div className="flex flex-col gap-4 items-center">
+          {data_team.map((team, i) => {
+            return <TeamListItem key={team.id} team={team} indexForImage={i} />;
+          })}
+        </div>
+      ) : (
+        <>
+          <p className="text-stone-500">
+            {"There are currently no teams in the tournament."}
+          </p>
+        </>
+      )}
+    </div>
+  );
+};
+
+const TeamListItem = ({
+  team: team,
+}: {
+  team: Team;
+  indexForImage: number;
+}) => {
+  return (
+    <GenericListItem
+      title={team.full_name}
+      subtitle={team.shortened_name}
+      href={`/t/${team.tournament_id}/team/${team.id}`}
+    />
+  );
+};
+
+export { TeamsList };

src/components/tournament/TournamentList.tsx

@@ -7,13 +7,13 @@ import MOW2024OlekRelief from "../../../public/S-MOW2024-olekrelief.jpg";
 
 const TournamentsList = async () => {
   let data_tournaments: Tournament[] = [];
-  const res = await fetchServerside("/tournament", {
+  const response = await fetchServerside("/tournament", {
     headers: {
       Cookie: (await cookies()).toString(),
     },
   });
-  if (res.ok) {
-    data_tournaments = await res.json();
+  if (response.ok) {
+    data_tournaments = await response.json();
   }
 
   return (

src/types/Team.ts

@@ -0,0 +1,8 @@
+type Team = {
+  id: string;
+  full_name: string;
+  shortened_name: string;
+  tournament_id: string;
+};
+
+export type { Team };