54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { Outlet, useLocation, useParams } from "react-router"
|
|
import { Link } from "react-router-dom"
|
|
import { GetPlayer } from "../../api/player"
|
|
import WithDataFetching from "../../components/withdatafetching"
|
|
import Player from "../../types/player"
|
|
import Sidebar from "./sidebar"
|
|
|
|
export default function PlayerPage() {
|
|
const { slug } = useParams()
|
|
|
|
if (!slug) {
|
|
return <div>No slug</div>
|
|
}
|
|
return (
|
|
<WithDataFetching
|
|
queryKey={["player", slug]}
|
|
queryFn={() => GetPlayer(slug)}
|
|
>
|
|
{(player) => <PlayerLayout player={player} />}
|
|
</WithDataFetching>
|
|
)
|
|
|
|
function PlayerLayout({ player }: { player: Player }) {
|
|
const { pathname } = useLocation()
|
|
const tabs = [
|
|
{ id: "summary", title: "Summary" },
|
|
{ id: "clubhistory", title: "Club History" },
|
|
{ id: "scores", title: "Scores" },
|
|
]
|
|
return (
|
|
<div className="grid h-screen grid-cols-[260px_1fr]">
|
|
<Sidebar player={player}></Sidebar>
|
|
<div className="flex flex-col">
|
|
<div className="flex divide-x border-b border-gray-200">
|
|
{tabs.map((tab) => (
|
|
<Link key={tab.id} to={`/player/${slug}/${tab.id}`}>
|
|
<div
|
|
key={tab.id}
|
|
className={`text-md px-6 py-2 text-center font-normal ${pathname.includes(tab.id) ? "bg-gray-200" : ""}`}
|
|
>
|
|
{tab.title}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="p-6">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|