Confirm?

Are you sure you want to proceed?
M
Morgan Jason

Shop Card Component Design

Clone & Customize via AI

MudBlazor Grocery Shop presents a grid of reusable MudCard item cards with quantity controls and an add-to-basket summary. Uses MudGrid layout and EventCallback bindings for inter-component updates.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Product listing implemented as a responsive grid of cards (MudGrid + MudItem). - Reusable item card with image, title, price display, quantity controls and Add button (MudCard, MudCardMedia, MudCardActions). - Lightweight basket summary showing item count and total price. - Inter-component communication using EventCallback<BasketEventArgs> to push basket events. ## Key components - MudGrid, MudItem - MudCard, MudCardMedia, MudCardContent, MudCardActions - MudText, MudButton, MudIconButton, MudSpacer - EventCallback<BasketEventArgs> and simple POCO models (GroceryItemModel, BasketEventArgs) ## How it works - The page defines an in-memory Items list of GroceryItemModel objects and renders a GroceryCard for each item inside a MudGrid. - GroceryCard manages local quantity state (int) and exposes an EventCallback<BasketEventArgs> named OnAddToBasket. - AddToBasket constructs BasketEventArgs and invokes the parent callback; the parent updates basketItemCount and TotalPrice and calls StateHasChanged. - Interaction patterns are imperative method calls (Increment/Decrement/AddToBasket) rather than EditForm binding or validation. ## Styling - Uses MudBlazor components and CSS overrides in app.css to make cards full-height and to pin actions to the card bottom: - .grocery-card sets flex column and height:100%. - .mud-card-actions margin-top:auto ensures consistent footer placement. - MudGrid provides responsive columns (xs/sm/md/lg). The layout adapts at small breakpoints; a mobile media rule reduces media height. ## Reuse steps 1. Add MudBlazor NuGet and register MudBlazor services and theme in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor or the component files. 3. Add the GroceryItemModel and BasketEventArgs classes or adapt to existing models. 4. Copy GroceryCard.razor and ShopDemo.razor into a Pages/Components folder and include app.css rules in site stylesheet. 5. Replace in-memory Items with real data services and wire persistence/DI for cart state. ## Limitations & next steps - This is a single-page demo generated by Instruct UI and does not include server-side state, persistence, authentication, or routing for a real cart checkout. - No form validation or accessibility announcements for quantity changes are implemented; consider using ARIA live regions or form patterns for screen readers. - Extend by adding a shared cart service (scoped) for centralized state, product API integration, and unit tests for event flows.