kyle
f593b2c7b8
- h2h_viewed from match card, dock, profile, stats, predictions - reaction_sent with emoji and surface; score_report_opened from all three report entry points - stats_filtered and stats_sorted on stats route and profile - rules/teams/players/bracket/tournament view events with sources - match_history_viewed, badge_viewed, player_searched (count only)
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import Sheet from "@/components/sheet/sheet"
|
|
import { useSheet } from "@/hooks/use-sheet"
|
|
import { ListIcon } from "@phosphor-icons/react"
|
|
import { Trans, useLingui } from "@lingui/react/macro"
|
|
import { useTournament } from "../../queries"
|
|
import { Button, Flex, Loader, Stack } from "@mantine/core"
|
|
import { lazy, Suspense } from "react"
|
|
import { NavTile } from "../started-tournament/sections/nav-grid"
|
|
import { track } from "@/lib/telemetry/client"
|
|
|
|
const RulesContent = lazy(() => import("./rules-content"));
|
|
|
|
interface RulesListButtonProps {
|
|
tournamentId: string;
|
|
}
|
|
|
|
const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
|
|
const { data: tournament } = useTournament(tournamentId);
|
|
const { open, isOpen, toggle } = useSheet();
|
|
const { t } = useLingui();
|
|
|
|
return (
|
|
<>
|
|
<NavTile
|
|
label={t`Rules`}
|
|
Icon={ListIcon}
|
|
onClick={() => {
|
|
track("rules_viewed", { source: "upcoming" });
|
|
open();
|
|
}}
|
|
/>
|
|
|
|
<Sheet title={t`Tournament Rules`} opened={isOpen} onChange={toggle}>
|
|
<Stack gap="xs">
|
|
<Suspense
|
|
fallback={
|
|
<Flex justify="center" align="center" w="100%" style={{ minHeight: '25vh' }}>
|
|
<Loader size="lg" />
|
|
</Flex>
|
|
}
|
|
>
|
|
<RulesContent content={tournament?.rules || ''} />
|
|
</Suspense>
|
|
<Button variant="subtle" c="red" onClick={toggle}><Trans>Close</Trans></Button>
|
|
</Stack>
|
|
</Sheet>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default RulesListButton;
|