●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Listing page with a searchable/filterable tournament catalogue rendered as responsive Bootstrap cards.
- Filter controls: InputText search, multiple InputSelect dropdowns (sport, format, status).
- Card UI per tournament via a reusable TournamentCard component showing badges, date, location and capacity.
- Navbar with profile dropdown and demo actions (Create, My Tournaments).
- Client-side filtering and demo data seeded from GetDemoTournaments().
## Key components
- InputText (search)
- InputSelect (filters)
- TournamentCard.razor (reusable card component)
- Navbar.razor
- TournamentCardModel (data model)
- @bind-Value, @onclick, foreach, [Parameter], StateHasChanged
## How it works
- Demo data is created in GetDemoTournaments() and stored in tournaments; ApplyFilters() produces filteredTournaments.
- Search and selects use @bind-Value and call ApplyFilters() on change (OnSearchChanged / OnFiltersChanged).
- TournamentCard receives a TournamentCardModel via a [Parameter] and renders badges, details and a View details button.
- UI updates use StateHasChanged(); filtering runs client-side in memory.
## Styling
- Layout and utilities use Bootstrap classes (container, row, col-*, btn, form-control, form-select, card).
- Icons use Font Awesome classes (fas fa-...).
- Component-scoped CSS (TournamentCard.razor.css) provides gradients, hover lift, illustration and text clamping.
- Global styles in app.css override form focus, navbar, dropdowns and color tokens; responsive behavior relies on Bootstrap breakpoints.
## Reuse steps
1. Add Bootstrap CSS and JS to the project (or include via _Host/_Layout). Add Font Awesome for icons.
2. Copy TournamentCard.razor, TournamentCard.razor.css, TournamentsPage.razor, Navbar.razor and TournamentCardModel.cs into the Blazor project.
3. Ensure app.css (or site CSS) contains the shared utility styles shown in the sample.
4. Wire real data: replace GetDemoTournaments() with a service injected via @inject or constructor and call async fetch methods.
5. Add routing to App.razor and create a details page; convert client-side filtering to server-side endpoints when data grows.
## Limitations & next steps
- This is a single-page showcase generated by Instruct UI; authentication, API services and persistence are not implemented.
- No paging, server-side filtering, or sorting for large datasets; current filters run in-memory.
- Accessibility enhancements (keyboard focus order, ARIA labels) and localization are not fully addressed.
- Next steps: add a details/edit route, modal create/update flows, server APIs, unit tests for filtering logic, and role-based authorization when integrating backend services.