●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Plan selection grid of MudCard items with selectable state and most-popular badge
- Top navigation using MudAppBar and MudBreadcrumbs
- Filtering controls: MudSelect for provider, MudRadioGroup for property type
- Tabs using MudTabs to separate Electric and Gas plans
- Card actions with MudButton, icons, MudChip and a benefits list via MudList
- Simple client-side selection event to choose a plan
## Key components
- MudLayout, MudAppBar, MudContainer, MudGrid, MudItem
- MudBreadcrumbs, MudTabs, MudTabPanel
- MudSelect, MudSelectItem, MudRadioGroup, MudRadio
- MudCard, MudCardContent, MudChip, MudButton, MudIconButton
- MudList, MudListItem, MudText, MudIcon
## How it works
- Local view model PlanViewModel is populated in OnInitialized and bound to a private list _plans.
- Plan cards are rendered with a foreach over _plans; SelectPlan(int) sets _selectedPlanId to toggle selection and elevation.
- MudRadioGroup uses @bind-Value for property type; MudSelect uses Value for provider selection.
- Tabs are present as MudTabPanel entries but content is driven by the same plan list; no separate pane content per tab is wired.
- Interaction is event-driven (OnClick handlers) and state is stored in component fields; no server API calls or persistence included.
## Styling
- Uses MudBlazor component classes and a custom app.css for brand colors (app-bar-bg-color), price typography, selected-card-border and most-popular-banner.
- Select inputs use a white-bg-select override to force white background on MudSelect input container.
- Layout relies on MudGrid and responsive breakpoints (xs, sm, md, lg) provided by MudBlazor for responsiveness.
## Reuse steps
1. Add MudBlazor NuGet and register MudBlazor services and MudTheme in Program.cs (AddMudServices, MudThemeProvider).
2. Import MudBlazor namespace in _Imports.razor and add the provided app.css to the project and layout.
3. Copy EnergyPlansPage.razor and PlanViewModel, then adjust routes and navigation as needed.
4. Replace in-memory _plans with a service or API client and inject that service in the component.
5. Hook navigation or state persistence for _selectedPlanId and connect tabs to filtered datasets if required.
## Limitations & next steps
- This is a single-page demo generated by Instruct UI and does not include backend services, authentication, or data persistence.
- No form validation or EditForm/DataAnnotationsValidator are present; add EditForm where user input must be validated.
- Tabs are declared but separate tab content panels are not fully wired to distinct data sets or routes.
- Recommended next steps: inject a plans service, add server-side paging/filtering, persist selection, and add accessibility attributes and unit tests.