54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { Box } from "@mantine/core";
|
|
import { Suspense } from "react";
|
|
import Header from "./header";
|
|
import SwipeableTabs from "@/components/swipeable-tabs";
|
|
import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
|
|
import TeamList from "@/features/teams/components/team-list";
|
|
import StatsOverview from "@/components/stats-overview";
|
|
import MatchList from "@/features/matches/components/match-list";
|
|
import BadgeShowcase from "@/features/badges/components/badge-showcase";
|
|
import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
|
|
|
|
interface ProfileProps {
|
|
id: string;
|
|
}
|
|
|
|
const Profile = ({ id }: ProfileProps) => {
|
|
const { data: player } = usePlayer(id);
|
|
const { data: matches } = usePlayerMatches(id);
|
|
const { data: stats, isLoading: statsLoading } = usePlayerStats(id);
|
|
|
|
const tabs = [
|
|
{
|
|
label: "Overview",
|
|
content: (
|
|
<>
|
|
<Suspense fallback={<BadgeShowcaseSkeleton />}>
|
|
<BadgeShowcase playerId={id} />
|
|
</Suspense>
|
|
<StatsOverview statsData={stats} isLoading={statsLoading} />
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
label: "Matches",
|
|
content: <MatchList matches={matches || []} />,
|
|
},
|
|
{
|
|
label: "Teams",
|
|
content: <TeamList teams={player.teams || []} />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Header player={player} />
|
|
<Box mt="lg">
|
|
<SwipeableTabs tabs={tabs} />
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|