From e000393ed47aefabb898eed19db7d25dbf074520 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Dobrzy=C5=84ski?= <mateusz.dobrzynski64@gmail.com>
Date: Sat, 16 Aug 2025 20:17:50 +0200
Subject: [PATCH 1/2] feat: create a list of competing teams

---
 src/app/t/[path]/teams/page.tsx    | 11 +++++--
 src/components/GenericListItem.tsx | 33 +++++++++++++++++++
 src/components/team/TeamsList.tsx  | 53 ++++++++++++++++++++++++++++++
 src/types/Team.ts                  |  8 +++++
 4 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 src/components/GenericListItem.tsx
 create mode 100644 src/components/team/TeamsList.tsx
 create mode 100644 src/types/Team.ts

diff --git a/src/app/t/[path]/teams/page.tsx b/src/app/t/[path]/teams/page.tsx
index 41a086a..22d17ca 100644
--- a/src/app/t/[path]/teams/page.tsx
+++ b/src/app/t/[path]/teams/page.tsx
@@ -1,3 +1,6 @@
+import { TeamsList } from "@/components/team/TeamsList";
+import Link from "next/link";
+
 export default async function TournamentTeamsPage({
   params,
 }: {
@@ -5,9 +8,13 @@ export default async function TournamentTeamsPage({
 }) {
   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} />
     </>
   );
 }
diff --git a/src/components/GenericListItem.tsx b/src/components/GenericListItem.tsx
new file mode 100644
index 0000000..5b2bd26
--- /dev/null
+++ b/src/components/GenericListItem.tsx
@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { JSX } from "react";
+
+const GenericListItem = ({
+  title,
+  subtitle,
+  href,
+  icon,
+  indexForImage,
+}: {
+  title: string;
+  subtitle?: string;
+  href?: string;
+  icon?: () => JSX.Element;
+  indexForImage: number;
+}) => {
+  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>
+        </Link>
+      </div>
+    </>
+  );
+};
+
+export { GenericListItem };
diff --git a/src/components/team/TeamsList.tsx b/src/components/team/TeamsList.tsx
new file mode 100644
index 0000000..43c8dfe
--- /dev/null
+++ b/src/components/team/TeamsList.tsx
@@ -0,0 +1,53 @@
+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,
+  indexForImage,
+}: {
+  team: Team;
+  indexForImage: number;
+}) => {
+  return (
+    <GenericListItem
+      title={team.full_name}
+      subtitle={team.shortened_name}
+      href={`/t/${team.tournament_id}/team/${team.id}`}
+      indexForImage={indexForImage}
+    />
+  );
+};
+
+export { TeamsList };
diff --git a/src/types/Team.ts b/src/types/Team.ts
new file mode 100644
index 0000000..e4518db
--- /dev/null
+++ b/src/types/Team.ts
@@ -0,0 +1,8 @@
+type Team = {
+  id: string;
+  full_name: string;
+  shortened_name: string;
+  tournament_id: string;
+};
+
+export type { Team };

From 1997fdaf7d903b74425cbbdcc031af3c923b8cce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Dobrzy=C5=84ski?= <mateusz.dobrzynski64@gmail.com>
Date: Sat, 16 Aug 2025 20:25:11 +0200
Subject: [PATCH 2/2] fix: code cleanup

---
 src/components/GenericListItem.tsx           | 3 +--
 src/components/team/TeamsList.tsx            | 2 --
 src/components/tournament/TournamentList.tsx | 6 +++---
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/GenericListItem.tsx b/src/components/GenericListItem.tsx
index 5b2bd26..1bb1f70 100644
--- a/src/components/GenericListItem.tsx
+++ b/src/components/GenericListItem.tsx
@@ -6,13 +6,11 @@ const GenericListItem = ({
   subtitle,
   href,
   icon,
-  indexForImage,
 }: {
   title: string;
   subtitle?: string;
   href?: string;
   icon?: () => JSX.Element;
-  indexForImage: number;
 }) => {
   return (
     <>
@@ -24,6 +22,7 @@ const GenericListItem = ({
               {subtitle}
             </p>
           </div>
+          {icon && icon()}
         </Link>
       </div>
     </>
diff --git a/src/components/team/TeamsList.tsx b/src/components/team/TeamsList.tsx
index 43c8dfe..8cfa98d 100644
--- a/src/components/team/TeamsList.tsx
+++ b/src/components/team/TeamsList.tsx
@@ -35,7 +35,6 @@ const TeamsList = async ({ tournament_id }: { tournament_id: string }) => {
 
 const TeamListItem = ({
   team: team,
-  indexForImage,
 }: {
   team: Team;
   indexForImage: number;
@@ -45,7 +44,6 @@ const TeamListItem = ({
       title={team.full_name}
       subtitle={team.shortened_name}
       href={`/t/${team.tournament_id}/team/${team.id}`}
-      indexForImage={indexForImage}
     />
   );
 };
diff --git a/src/components/tournament/TournamentList.tsx b/src/components/tournament/TournamentList.tsx
index 579cd32..0c38f73 100644
--- a/src/components/tournament/TournamentList.tsx
+++ b/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 (