UI Component Library
The BBX platform utilizes a specialized set of UI components designed to handle tournament logic, match reporting, and bracket visualization. These components are built with React, Tailwind CSS, and Lucide React icons to ensure a responsive and consistent user experience.
Display Components
MatchCard
The MatchCard is the primary display unit for match information. It is used extensively in the Bracket and Admin views to show participant pairings, current scores, and the match status.
Props/Interface:
match: The match object containingparticipant_a_id,participant_b_id,score_a,score_b, andstatus.isFinals: A boolean that applies specific "Grand Finals" styling (e.g., gold borders or trophy icons).
Usage Example:
import { MatchCard } from "@/components/match-card";
// Within a bracket round map
<MatchCard
key={match.id}
match={match}
isFinals={roundNum === maxRound}
/>
BracketConnector
An internal utility component used to render the SVG or CSS-based paths between bracket rounds. It visually connects a match in one round to its resulting match in the next.
Role:
- Calculates heights and vertical offsets to align lines with the
MatchCardnodes. - Primarily used within the
BracketPage.
Interaction Modals
MatchScoringModal
A high-priority component used by tournament organizers to input scores and determine match winners. It handles the state for points (e.g., Spin Finish, Over Finish) and communicates with the server-side reportMatchAction.
Props/Interface:
isOpen: Boolean controlling visibility.onClose: Callback function to clear the selection.match: The specific match object being edited.onRefresh: Callback to trigger a data re-fetch after a successful report.
Usage Example:
<MatchScoringModal
isOpen={!!selectedMatch}
onClose={() => setSelectedMatch(null)}
match={selectedMatch}
onRefresh={fetchData}
/>
ConfirmationModal
A reusable dialog for destructive or critical actions, such as advancing to the next round, deleting a participant, or resetting a match.
Props/Interface:
isOpen: Boolean controlling visibility.onConfirm: The async function to execute upon user confirmation.title: String for the modal header.description: String for the warning message.
Usage Example:
<ConfirmationModal
isOpen={confirmState.isOpen}
title="Advance Bracket?"
description="This will lock current scores and generate matches for the next round."
onConfirm={handleAdvance}
onClose={() => setConfirmState({ isOpen: false })}
/>
VictoryModal
A celebratory overlay triggered when the final match of the "Top Cut" stage is completed. It displays the champion's name and tournament statistics.
Props/Interface:
isOpen: Boolean controlling visibility.winner: The participant object of the tournament champion.
Usage Example:
<VictoryModal
isOpen={showVictoryModal}
winner={championData}
/>
Administrative Components
AdvanceRoundButton
A specialized button component found in the Admin Console. It manages the loading state and confirmation flow for transitioning the tournament from Swiss rounds to the Top Cut, or moving between bracket stages.
Usage Example:
// Located in the "Dangerous Zone" of the Admin Console
<AdvanceRoundButton
onSuccess={() => window.location.reload()}
/>
RegistrationToggle
A toggle switch used by organizers to open or close tournament sign-ups. It interacts with the toggleRegistrationAction to update the tournament status in real-time.
Shared Layouts & Icons
The library standardizes certain visual cues using Lucide icons:
- Trophy (
Trophy): Used for champions and tournament status. - Users (
Users): Used for participant lists and registration counts. - Rocket (
Rocket): Used for the tournament creation flow. - Alert (
AlertCircle): Used for pending matches or errors.