Confirm?

Are you sure you want to proceed?
G
Gio gio

Parametres Consommation Interface Design

Clone & Customize via AI

MudBlazor Settings Page presenting a two-column settings layout with MudList navigation and a token usage card. Uses MudGrid layout and MudPaper containers with MudIconButton actions.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Two-column settings layout (left navigation, right content) rendered with MudGrid/MudItem. - Navigation list with selectable MudListItem entries (AI behavior, Language, Shortcuts, Consumption). - Token usage card with banner background, large numeric display and contextual text. - Close icon button in the content panel (UI only, no handler). - Responsive CSS adjustments for small screens via media queries. ## Key components - MudGrid, MudItem - MudPaper - MudList, MudListItem (with @bind-SelectedValue) - MudStack, MudIcon, MudText - MudIconButton ## How it works - Layout uses MudGrid and MudItem to create a 3/9 column split on medium+ screens and stacked layout on xs. - Navigation selection binds to the private field `_selectedNavItem` via `@bind-SelectedValue` on MudList; selection changes are styled using the `.mud-list-item-selected` CSS class. - The token card is a styled MudPaper with an inline background-image URL and text elements (MudText) for the metric and label. - The close button is rendered with MudIconButton but contains no click handler in the provided code; navigation actions and data loading are not implemented. ## Styling - Uses MudBlazor components for structure and a custom stylesheet (`app.css`) for theming: dark greys, rounded corners, and token card background. - CSS targets MudBlazor classes (e.g., `.mud-list-item-selected`, `.mud-icon-root`) and adds responsive overrides with a media query for screens under 600px. - No Tailwind or Bootstrap utility classes detected. ## Reuse steps 1. Add MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor (`@using MudBlazor`) and include MudBlazor CSS and icons in index.html/_Host. 3. Copy the Razor component and app.css into the project and adjust the background-image URL or resource handling. 4. Replace the static `_selectedNavItem` binding with navigation handlers or a settings view model; wire services to load/save settings. 5. Add click handlers for MudIconButton and implement localization or downstream routing for each MudListItem value. ## Limitations & next steps - No data layer, settings model, or persistence is provided; service registration and API wiring are required to store real preferences. - Close button and navigation item actions are not implemented; add event handlers or link to routes/pages. - No form inputs or validation are present; add EditForm/DataAnnotationsValidator if editable settings are needed. - Localization and accessibility checks (aria labels, keyboard focus) are not included and should be validated when integrating. Note: This page was generated by Instruct UI and is editable; integration requires connecting services, routing, and state management.