●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Tournament details view with header, descriptive text and metrics (location, dates, capacity, registration window).
- Responsive Bootstrap grid and card layout (main detail panel + side registration/management card).
- Status and capacity badges with color mapping and visual indicators.
- Conditional registration panel showing alerts and Register / Unregister buttons based on auth and registration state.
- Loading spinner and not-found alert states.
- Mock data loader that seeds a TournamentDetailsViewModel for preview.
## Key components
- @page route parameter: `@page "/tournaments/{TournamentId:int}"` and `[Parameter] public int TournamentId { get; set; }`
- Razor markup using Bootstrap: `container`, `row`, `col-*`, `card`, `badge`, `alert`, `btn`, `spinner-border`.
- Buttons with `@onclick` handlers and async methods: `RegisterAsync`, `UnregisterAsync`.
- View models: `TournamentDetailsViewModel`, `TournamentCategoryModel`, `TournamentStatusModel`, `TournamentRegistrationSummaryModel`.
- Conditional rendering via C# booleans: `isLoading`, `tournament is null`, `isAuthenticated`, `isRegistered`, `isManagerOrAdmin`.
- Font Awesome icons used for visual affordances.
## How it works
- Route parameter binds TournamentId and OnInitialized calls `LoadMockTournament()` to populate the view model.
- UI state flows from component fields (`tournament`, `isLoading`, `isRegistered`, etc.).
- `CanRegister()` and `CanUnregister()` encapsulate business rules: registration window, capacity and status checks using DateTime comparisons.
- `RegisterAsync()` and `UnregisterAsync()` toggle `isRegistered`, update `RegistrationSummary.RegisteredCount`, and call `InvokeAsync(StateHasChanged)` to refresh the UI.
- Badge classes are chosen by helper methods `GetStatusBadgeClass`, `GetCapacityBadgeClass`, and capacity labels via `GetCapacityLabel()`.
## Styling
- Uses Bootstrap utility and layout classes (`container`, `row`, `g-4`, `col-12 col-lg-8`, `card`, `d-flex`, `text-muted`, `badge`, `btn`), so responsiveness follows Bootstrap grid behavior.
- Font Awesome icons provide glyphs (fa-*) and are expected to be loaded separately.
- Inline pre-line style used for multi-line description rendering.
## Reuse steps
1. Create or use an existing Blazor project and ensure Bootstrap CSS is included (default Blazor templates include it).
2. Copy the Razor component and the view model classes into the project.
3. Replace `LoadMockTournament()` with an injected service (e.g., `ITournamentService`) and call async API methods in `OnInitializedAsync()`.
4. Wire real authentication/authorization (CascadingAuthenticationState or AuthenticationStateProvider) and replace mock booleans (`isAuthenticated`, `isManagerOrAdmin`, `isRegistered`).
5. Add Font Awesome (or preferred icon set) to _Host.cshtml or index.html and adjust badge/button classes as needed.
6. Implement server-side registration endpoints, error handling and confirmation dialogs for Register/Unregister flows.
## Limitations & next steps
- The page uses mock data and local booleans; no real API calls, persistence or auth integration are implemented.
- No form validation or EditForm is present for tournament editing; management buttons are placeholders without handlers.
- Add service injection, error handling, loading/error states for API calls, optimistic UI or transaction rollback for registration.
- Add participant list page, confirmation modals, and server-side validation for registration limits and race conditions.