●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Product listing grid with responsive cards, images, ratings and pricing.
- Top app bars (primary and secondary) with search TextField, account menu and cart badge.
- Left navigation drawer with grouped links (MudNavGroup/MudNavLink).
- Tabs for content sections (MudTabs/MudTabPanel).
- Interactive card actions (Add to Cart, Details) and simple state for cart count.
## Key components
- MudLayout, MudAppBar, MudMainContent, MudPaper
- MudDrawer, MudDrawerHeader, MudNavMenu, MudNavGroup, MudNavLink
- MudTabs, MudTabPanel
- MudGrid, MudItem
- MudCard, MudCardMedia, MudCardContent, MudCardActions
- MudTextField, MudText, MudButton, MudIconButton, MudMenu, MudBadge, MudRating
## How it works
- Data is provided by a local List<ProductViewModel> populated in OnInitialized; cards are generated with a foreach loop.
- Cart count is a local int field incremented by OnClick handlers on MudButton (`OnClick="@(() => _cartItemCount++)"`).
- Drawer open state is bound with `@bind-Open="_drawerOpen"` and toggled by ToggleDrawer().
- Tabs separate content areas using MudTabPanel; search input is a MudTextField with an end adornment icon.
- No server calls, authentication or persistence are wired; interactions are client-side and use simple field/state updates.
## Styling
- Component library: MudBlazor (Mud* components and Icons).
- Custom CSS in app.css adjusts top padding, drawer background, hover effect and text ellipsis.
- Uses MudBlazor responsive props (MudItem xs/sm/md/lg) and a responsive DrawerVariant for breakpoint-aware layout.
## Reuse steps
1. Add the MudBlazor NuGet package and import `MudBlazor` in _Imports.razor.
2. Register MudBlazor services in Program.cs and add MudBlazor CSS and theme to index.html or _Host.cshtml.
3. Copy the component files and app.css into the project and import the stylesheet.
4. Replace the sample ProductViewModel with a domain model and bind to a service or API for real data.
5. Wire a cart service, routing and authentication as needed (register in DI and replace local fields with injected services).
## Limitations & next steps
- This is a single-page UI module generated by Instruct UI and uses in-memory sample data; backend integration is required for product APIs, cart persistence and orders.
- No form validation or EditForm usage is present; add EditForm/DataAnnotationsValidator for input forms.
- Accessibility attributes, keyboard navigation and ARIA roles should be audited for production.
- Consider adding paging/filtering for large product sets and a centralized state/store for cart and user sessions.