50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { Outlet, useLocation, useParams } from "react-router"
|
|
import { Link } from "react-router-dom"
|
|
import { GetTeam } from "../../api/team"
|
|
import WithDataFetching from "../../components/withdatafetching"
|
|
import Team from "../../types/team"
|
|
import Sidebar from "./sidebar"
|
|
|
|
export default function TeamPage() {
|
|
const { slug } = useParams()
|
|
|
|
if (!slug) {
|
|
return <div>No slug</div>
|
|
}
|
|
return (
|
|
<WithDataFetching queryKey={["team", slug]} queryFn={() => GetTeam(slug)}>
|
|
{(team) => <TeamLayout team={team} />}
|
|
</WithDataFetching>
|
|
)
|
|
|
|
function TeamLayout({ team }: { team: Team }) {
|
|
const { pathname } = useLocation()
|
|
const tabs = [
|
|
{ id: "roster", title: "Roster" },
|
|
{ id: "transfers", title: "Transfers" },
|
|
]
|
|
return (
|
|
<div className="grid h-screen grid-cols-[260px_1fr]">
|
|
<Sidebar team={team}></Sidebar>
|
|
<div className="flex flex-col">
|
|
<div className="flex divide-x border-b border-gray-200">
|
|
{tabs.map((tab) => (
|
|
<Link key={tab.id} to={`/team/${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>
|
|
)
|
|
}
|
|
}
|