Files
flxn-app/src/features/tournaments/components/profile/index.tsx

44 lines
1.1 KiB
TypeScript

import { useMemo } from "react";
import { Box } from "@mantine/core";
import Header from "./header";
import TeamList from "@/features/teams/components/team-list";
import SwipeableTabs from "@/components/swipeable-tabs";
import { useTournament } from "../../queries";
import MatchList from "@/features/matches/components/match-list";
import { TournamentStats } from "../tournament-stats";
interface ProfileProps {
id: string;
}
const Profile = ({ id }: ProfileProps) => {
const { data: tournament } = useTournament(id);
if (!tournament) return null;
const tabs = useMemo(() => [
{
label: "Overview",
content: <TournamentStats tournament={tournament} />
},
{
label: "Matches",
content: <MatchList matches={tournament.matches?.sort((a, b) => b.order - a.order) || []} />
},
{
label: "Teams",
content: <>
<TeamList teams={tournament.teams || []} />
</>
}
], [tournament]);
return <>
<Header tournament={tournament} />
<Box mt='lg'>
<SwipeableTabs tabs={tabs} />
</Box>
</>;
};
export default Profile;