feat: integrate TeamsSection component into tournament detail page

Update tournament detail page to use new TeamsSection component:
- Import TeamsSection component
- Replace static teams display with interactive configuration
- Pass tournament ID, teams, and participants to component

Refs #22
This commit is contained in:
2026-04-03 19:26:52 -07:00
parent 0ee295e9b1
commit 1532c10223
+13 -25
View File
@@ -6,6 +6,7 @@ import { notFound, redirect } from "next/navigation"
import { canManageTournament, canDeleteTournament } from "@/lib/permissions"
import { getTournamentStatus } from "@/lib/tournamentUtils"
import { DeleteTournamentButton } from "@/components/DeleteTournamentButton"
import TeamsSection from "@/components/TeamsSection"
interface PageProps {
params: {
@@ -284,31 +285,18 @@ export default async function TournamentDetailPage({ params }: PageProps) {
</div>
{/* Teams Section */}
<div className="bg-white shadow rounded-lg p-6 mb-6">
<h2 className="text-lg font-medium text-gray-900 mb-4">
Teams ({tournament.teams.length})
</h2>
{tournament.teams.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{tournament.teams.map((team) => (
<div
key={team.id}
className="bg-gray-50 rounded p-3 flex justify-between items-center"
>
<div>
<p className="font-medium text-gray-900">
{team.player1.name} + {team.player2.name}
</p>
<p className="text-sm text-gray-500">{team.teamName}</p>
</div>
</div>
))}
</div>
) : (
<p className="text-gray-500">No teams created yet.</p>
)}
</div>
<TeamsSection
tournamentId={tournament.id}
teams={tournament.teams}
participants={tournament.participants.map(p => ({
id: p.player.id,
name: p.player.name,
currentElo: p.player.currentElo,
}))}
teamDurability={tournament.teamDurability || "permanent"}
partnerRotation={tournament.partnerRotation || "none"}
allowByes={tournament.allowByes ?? true}
/>
{/* Recent Matches Section */}
<div className="bg-white shadow rounded-lg p-6">