4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T46f9,'use client' import React, { useState, useEffect, useMemo } from 'react' import { motion } from 'motion/react' import { cn } from '@/lib/utils' import { IconWorld, IconChevronLeft, IconChevronRight } from '@tabler/icons-react' export const TEAMS = { southAfrica: { name: 'South Africa', code: 'za' }, netherlands: { name: 'Netherlands', code: 'nl' }, germany: { name: 'Germany', code: 'de' }, sweden: { name: 'Sweden', code: 'se' }, senegal: { name: 'Senegal', code: 'sn' }, bosnia: { name: 'Bosnia and Herzegovina', code: 'ba' }, austria: { name: 'Austria', code: 'at' }, croatia: { name: 'Croatia', code: 'hr' }, ivoryCoast: { name: "Côte d'Ivoire", code: 'ci' }, ecuador: { name: 'Ecuador', code: 'ec' }, drCongo: { name: 'DR Congo', code: 'cd' }, algeria: { name: 'Algeria', code: 'dz' }, ghana: { name: 'Ghana', code: 'gh' }, australia: { name: 'Australia', code: 'au' }, egypt: { name: 'Egypt', code: 'eg' }, caboVerde: { name: 'Cabo Verde', code: 'cv' }, canada: { name: 'Canada', code: 'ca' }, morocco: { name: 'Morocco', code: 'ma' }, paraguay: { name: 'Paraguay', code: 'py' }, france: { name: 'France', code: 'fr' }, usa: { name: 'USA', code: 'us' }, belgium: { name: 'Belgium', code: 'be' }, portugal: { name: 'Portugal', code: 'pt' }, spain: { name: 'Spain', code: 'es' }, brazil: { name: 'Brazil', code: 'br' }, norway: { name: 'Norway', code: 'no' }, mexico: { name: 'Mexico', code: 'mx' }, england: { name: 'England', code: 'gb-eng' }, switzerland: { name: 'Switzerland', code: 'ch' }, colombia: { name: 'Colombia', code: 'co' }, argentina: { name: 'Argentina', code: 'ar' }, japan: { name: 'Japan', code: 'jp' }, } as const type Team = (typeof TEAMS)[keyof typeof TEAMS] type MatchStatus = 'upcoming' | 'live' | 'finished' type MatchWinner = 'home' | 'away' interface MatchTeam { team: Team score: number | null penalties?: number } interface Match { id: string date: string time?: string status: MatchStatus home: MatchTeam away: MatchTeam winner?: MatchWinner } interface Round { name: string matches: Match[] } const rounds: Round[] = [ { name: 'Round of 32', matches: [ { id: 'r32-1', date: 'Mon, 29 Jun', status: 'finished', home: { team: TEAMS.southAfrica, score: 0 }, away: { team: TEAMS.canada, score: 1 }, winner: 'away', }, { id: 'r32-2', date: 'Tue, 30 Jun', status: 'finished', home: { team: TEAMS.netherlands, score: 1, penalties: 2 }, away: { team: TEAMS.morocco, score: 1, penalties: 3 }, winner: 'away', }, { id: 'r32-3', date: 'Tue, 30 Jun', status: 'finished', home: { team: TEAMS.germany, score: 1, penalties: 3 }, away: { team: TEAMS.paraguay, score: 1, penalties: 4 }, winner: 'away', }, { id: 'r32-4', date: 'Wed, 1 Jul', status: 'finished', home: { team: TEAMS.france, score: 3 }, away: { team: TEAMS.sweden, score: 0 }, winner: 'home', }, { id: 'r32-5', date: 'Thu, 2 Jul', status: 'finished', home: { team: TEAMS.belgium, score: 3 }, away: { team: TEAMS.senegal, score: 2 }, winner: 'home', }, { id: 'r32-6', date: 'Thu, 2 Jul', status: 'finished', home: { team: TEAMS.usa, score: 2 }, away: { team: TEAMS.bosnia, score: 0 }, winner: 'home', }, { id: 'r32-7', date: 'Fri, 3 Jul', status: 'finished', home: { team: TEAMS.spain, score: 3 }, away: { team: TEAMS.austria, score: 0 }, winner: 'home', }, { id: 'r32-8', date: 'Fri, 3 Jul', status: 'finished', home: { team: TEAMS.portugal, score: 2 }, away: { team: TEAMS.croatia, score: 1 }, winner: 'home', }, { id: 'r32-9', date: 'Mon, 29 Jun', status: 'finished', home: { team: TEAMS.brazil, score: 2 }, away: { team: TEAMS.japan, score: 1 }, winner: 'home', }, { id: 'r32-10', date: 'Tue, 30 Jun', status: 'finished', home: { team: TEAMS.ivoryCoast, score: 1 }, away: { team: TEAMS.norway, score: 2 }, winner: 'away', }, { id: 'r32-11', date: 'Wed, 1 Jul', status: 'finished', home: { team: TEAMS.mexico, score: 2 }, away: { team: TEAMS.ecuador, score: 0 }, winner: 'home', }, { id: 'r32-12', date: 'Wed, 1 Jul', status: 'finished', home: { team: TEAMS.england, score: 2 }, away: { team: TEAMS.drCongo, score: 1 }, winner: 'home', }, { id: 'r32-13', date: 'Fri, 3 Jul', status: 'finished', home: { team: TEAMS.switzerland, score: 2 }, away: { team: TEAMS.algeria, score: 0 }, winner: 'home', }, { id: 'r32-14', date: 'Sat, 4 Jul', status: 'finished', home: { team: TEAMS.colombia, score: 1 }, away: { team: TEAMS.ghana, score: 0 }, winner: 'home', }, { id: 'r32-15', date: 'Fri, 3 Jul', status: 'finished', home: { team: TEAMS.australia, score: 1, penalties: 2 }, away: { team: TEAMS.egypt, score: 1, penalties: 4 }, winner: 'away', }, { id: 'r32-16', date: 'Sat, 4 Jul', status: 'finished', home: { team: TEAMS.argentina, score: 3 }, away: { team: TEAMS.caboVerde, score: 2 }, winner: 'home', }, ], }, { name: 'Round of 16', matches: [ { id: 'r16-1', date: 'Sat, 4 Jul', status: 'finished', home: { team: TEAMS.canada, score: 0 }, away: { team: TEAMS.morocco, score: 3 }, winner: 'away', }, { id: 'r16-2', date: 'Sun, 5 Jul', status: 'finished', home: { team: TEAMS.paraguay, score: 0 }, away: { team: TEAMS.france, score: 1 }, winner: 'away', }, { id: 'r16-3', date: 'Mon, 6 Jul', status: 'finished', home: { team: TEAMS.usa, score: 1 }, away: { team: TEAMS.belgium, score: 4 }, winner: 'away', }, { id: 'r16-4', date: 'Mon, 6 Jul', status: 'finished', home: { team: TEAMS.portugal, score: 0 }, away: { team: TEAMS.spain, score: 1 }, winner: 'away', }, { id: 'r16-5', date: 'Mon, 6 Jul', status: 'finished', home: { team: TEAMS.brazil, score: 1 }, away: { team: TEAMS.norway, score: 2 }, winner: 'away', }, { id: 'r16-6', date: 'Mon, 6 Jul', status: 'finished', home: { team: TEAMS.mexico, score: 2 }, away: { team: TEAMS.england, score: 3 }, winner: 'away', }, { id: 'r16-7', date: 'Tue, 7 Jul', status: 'finished', home: { team: TEAMS.switzerland, score: 0, penalties: 4 }, away: { team: TEAMS.colombia, score: 0, penalties: 3 }, winner: 'home', }, { id: 'r16-8', date: 'Tue, 7 Jul', status: 'finished', home: { team: TEAMS.argentina, score: 3 }, away: { team: TEAMS.egypt, score: 2 }, winner: 'home', }, ], }, { name: 'Quarter-finals', matches: [ { id: 'qf-1', date: 'Fri, 10 Jul', time: '4:00 am', status: 'finished', home: { team: TEAMS.france, score: 2 }, away: { team: TEAMS.morocco, score: 0 }, winner: 'home', }, { id: 'qf-2', date: 'Sat, 11 Jul', time: '3:00 am', status: 'finished', home: { team: TEAMS.spain, score: 2 }, away: { team: TEAMS.belgium, score: 1 }, winner: 'home', }, { id: 'qf-3', date: 'Sun, 12 Jul', time: '5:00 am', status: 'finished', home: { team: TEAMS.norway, score: 1 }, away: { team: TEAMS.england, score: 2 }, winner: 'away', }, { id: 'qf-4', date: 'Sun, 12 Jul', time: '10:00 am', status: 'finished', home: { team: TEAMS.argentina, score: 3 }, away: { team: TEAMS.switzerland, score: 1 }, winner: 'home', }, ], }, { name: 'Semi-finals', matches: [ { id: 'sf-1', date: 'Wed, 15 Jul', time: '4:00 am', status: 'finished', home: { team: TEAMS.france, score: 1 }, away: { team: TEAMS.spain, score: 2 }, winner: 'away', }, { id: 'sf-2', date: 'Thu, 16 Jul', time: '3:00 am', status: 'finished', home: { team: TEAMS.england, score: 1 }, away: { team: TEAMS.argentina, score: 3 }, winner: 'away', }, ], }, { name: 'Final', matches: [ { id: 'f-1', date: 'Mon, 20 Jul', time: '3:00 am', status: 'finished', home: { team: TEAMS.spain, score: 1 }, away: { team: TEAMS.argentina, score: 0 }, winner: 'home', }, ], }, ] const uTransition: any = { duration: 0.5, ease: [0.4, 0, 0.2, 1] } const Flag = ({ team }: any) => { return team ? ( {`${team.name}

) : ( ) } const TeamScore = ({ side, isWinner, isFinished }: any) => { const isLoser = isFinished && !isWinner return (

{side.team?.name ?? 'TBD'} {side.score !== null && ( {side.score} {side.penalties !== undefined && ` (${side.penalties})`} )}

) } const MatchBox = ({ match }: any) => { const isFinished = match.status === 'finished' return (

{match.date} {match.time ? `, ${match.time}` : ''} {isFinished && ( FT{match.home.penalties !== undefined && ' (P)'} )}

) } const Clock = () => { const [time, setTime] = useState(() => new Date()) useEffect(() => { const timer = window.setInterval(() => setTime(new Date()), 1000) return () => window.clearInterval(timer) }, []) const formattedTime = useMemo( () => new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Singapore', weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', second: '2-digit', hour12: true, }).format(time), [time], ) return (

All times are in UTC+8 · Current time:{' '} {formattedTime}

) } const BracketContainer = ({ tournamentRounds, initialRound = 1, className }: any) => { const maxRound = Math.max(0, tournamentRounds.length - 2) const [currentRound, setCurrentRound] = useState(() => Math.min(Math.max(initialRound, 0), maxRound)) const getXPos = (rIdx: number) => 20 + (rIdx - currentRound) * 290 const yPositions = useMemo(() => { const pos: number[][] = tournamentRounds.map(() => []) pos[currentRound] = tournamentRounds[currentRound].matches.map((_: any, i: number) => 156 * i + 62) for (let r = currentRound + 1; r < tournamentRounds.length; r++) { pos[r] = tournamentRounds[r].matches.map((_: any, i: number) => (pos[r - 1][2 * i] + pos[r - 1][2 * i + 1]) / 2) } for (let r = currentRound - 1; r >= 0; r--) { pos[r] = tournamentRounds[r].matches.map((_: any, i: number) => pos[r + 1][Math.floor(i / 2)]) } return pos }, [tournamentRounds, currentRound]) const containerHeight = 156 * tournamentRounds[currentRound].matches.length - 32 return (

setCurrentRound((prev) => Math.max(0, prev - 1))} animate={{ opacity: currentRound > 0 ? 1 : 0 }} transition={uTransition} className={cn( 'text-foreground hover:bg-muted/20 absolute left-0 top-0 z-10 flex h-10 w-10 items-center justify-center rounded-full transition-colors', currentRound === 0 && 'pointer-events-none', )} > setCurrentRound((prev) => Math.min(maxRound, prev + 1))} animate={{ opacity: currentRound < maxRound ? 1 : 0 }} transition={uTransition} className={cn( 'text-foreground hover:bg-muted/20 absolute right-0 top-0 z-10 flex h-10 w-10 items-center justify-center rounded-full transition-colors', currentRound >= maxRound && 'pointer-events-none', )} > {tournamentRounds.map((round: any, idx: number) => ( = currentRound && idx < currentRound + 3 ? 1 : 0 }} transition={uTransition} style={{ width: 250 }} className="absolute top-0 flex h-10 items-center justify-center" > {round.name} ))}

{tournamentRounds.map((round: any, rIdx: number) => round.matches.map((match: any, mIdx: number) => ( )), )} {tournamentRounds.map((round: any, rIdx: number) => rIdx === 0 ? null : round.matches.map((match: any, mIdx: number) => { const yTop = yPositions[rIdx - 1][2 * mIdx] const height = yPositions[rIdx - 1][2 * mIdx + 1] - yTop return ( currentRound ? 1 : 0, }} transition={uTransition} style={{ width: 20 }} className="border-border/60 absolute left-0 top-0 rounded-r-xl border-y border-r" > ) }), )} {tournamentRounds.map((round: any, rIdx: number) => round.matches.map((match: any, mIdx: number) => ( = currentRound ? 1 : 0 }} transition={uTransition} className={cn('absolute left-0 top-0', rIdx < currentRound && 'pointer-events-none')} > )), )}

) } export const TournamentBracket = () => (

) 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4d",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/lib-utils.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/registry/components/spaceui/tournament-bracket/index.tsx","content":"$4f","type":"registry:component","target":"components/spaceui/tournament-bracket.tsx"}],"className":"h-[70svh] min-h-80"}]]}]