-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
26ae057
commit cf7f7a7
Showing
1 changed file
with
132 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,133 @@ | ||
export default function Results() { | ||
return <div></div>; | ||
'use client'; | ||
|
||
import { useParams } from 'next/navigation'; | ||
import { Button } from '../../../components/ui/button'; | ||
import Link from 'next/link'; | ||
import { | ||
Card, | ||
CardDescription, | ||
CardHeader, | ||
CardTitle, | ||
} from '../../../components/ui/card'; | ||
import { CreateTeamDialog } from '../../../components/tournament/create_team_dialog'; | ||
import { TeamDetailsDialog } from '@/components/tournament/teamDetailsDialog'; | ||
|
||
export interface Team { | ||
name: string; | ||
players: string[]; | ||
wins?: number; | ||
} | ||
const teams: Team[] = [ | ||
{ | ||
name: 'Embret sitt lag', | ||
players: ['Embret', 'Mori', 'Henrik', 'Eirik'], | ||
wins: 3, | ||
}, | ||
{ | ||
name: 'Henrik sitt lag', | ||
players: ['Henrik', 'Mori', 'Eirik', 'Embret'], | ||
wins: 7, | ||
}, | ||
{ | ||
name: 'Mori sitt lag', | ||
players: ['Henrik', 'Mori', 'Eirik', 'Embret'], | ||
wins: 10, | ||
}, | ||
{ | ||
name: 'Frida sitt lag', | ||
players: ['Henrik', 'Mori', 'Eirik', 'Embret'], | ||
wins: 1, | ||
}, | ||
{ | ||
name: 'Jarand sitt lag', | ||
players: ['Henrik', 'Mori', 'Eirik', 'Embret'], | ||
wins: 15, | ||
}, | ||
]; | ||
|
||
export default function ResultsPage() { | ||
const { id } = useParams(); | ||
const sortedTeams = teams.sort((a, b) => (a.wins || 0) - (b.wins || 0)); | ||
|
||
return ( | ||
<main className="flex flex-col justify-between items-center w-full max-w-xl gap-4 h-[calc(100svh-70px)] px-4"> | ||
<div className="w-full flex flex-col justify-center items-center"> | ||
<div className="mb-1 mt-4">My tournament title</div> | ||
<div className="text-3xl font-bold">Resultater</div> | ||
<Podium teams={sortedTeams} /> | ||
<Losers teams={sortedTeams} /> | ||
</div> | ||
</main> | ||
); | ||
} | ||
|
||
function TeamCard({ team, place }: { team: Team; place: number }) { | ||
return ( | ||
<Card> | ||
<CardHeader className="flex flex-row justify-between items-center"> | ||
<div className="flex flex-col gap-2 items-start"> | ||
<CardTitle className={'font-medium'}> | ||
#{place.toString()} {team.name} | ||
</CardTitle> | ||
</div> | ||
</CardHeader> | ||
</Card> | ||
); | ||
} | ||
|
||
function Losers({ teams }: { teams: Team[] }) { | ||
return ( | ||
<div className="flex flex-col gap-4 w-full mt-4"> | ||
{teams.slice(3).map((team, index) => ( | ||
<TeamCard key={index} team={team} place={index + 4} /> | ||
))} | ||
</div> | ||
); | ||
} | ||
|
||
function Podium({ teams }: { teams: Team[] }) { | ||
return ( | ||
<div | ||
className={ | ||
'flex mt-12 flex-row justify-between gap-2 h-96 items-end w-full' | ||
} | ||
> | ||
<div className="flex flex-col gap-2 h-[70%] justify-end items-center flex-1"> | ||
<div className={'font-bold'}>{teams[1].name}</div> | ||
<div>Icon</div> | ||
<Card | ||
className={ | ||
'bg-primary flex flex-col justify-end h-[70%] items-center pb-2 text-3xl flex-1' + | ||
' w-full' + | ||
' font-extrabold' | ||
} | ||
> | ||
#2 | ||
</Card> | ||
</div> | ||
<div className="flex flex-col gap-2 h-full items-center justify-end flex-1"> | ||
<div className={'text-center font-bold'}>{teams[0].name}</div> | ||
<div>Icon</div> | ||
<Card | ||
className={ | ||
'bg-primary flex flex-col justify-end h-full items-center pb-2 text-5xl w-full' + | ||
' font-black' | ||
} | ||
> | ||
#1 | ||
</Card> | ||
</div> | ||
<div className="flex flex-col gap-2 h-[50%] flex-1 items-center justify-end"> | ||
<div className={'font-bold'}>{teams[2].name}</div> | ||
<div>Icon</div> | ||
<Card | ||
className={ | ||
'bg-primary flex flex-col justify-end h-[50%] items-center pb-2 text-2xl w-full' | ||
} | ||
> | ||
#3 | ||
</Card> | ||
</div> | ||
</div> | ||
); | ||
} |