●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top search bar (MudTextField) with adornment and avatar/app button group.
- Primary navigation tabs via MudTabs/MudTabPanel.
- Image gallery laid out with MudGrid and MudItem using MudImage cards.
- Hover overlay with MudToggleIconButton actions for like/select.
- Grouping of images by date labels (Today/Yesterday/Month Year).
- Infinite scroll trigger with loading indicators (MudProgressCircular).
## Key components
- MudContainer, MudPaper, MudTextField, MudTabs, MudTabPanel
- MudGrid, MudItem, MudImage, MudText, MudDivider
- MudToggleIconButton, MudIconButton, MudAvatar, MudProgressCircular
- MudScrollToTop and local ImageViewModel class
## How it works
- Two-way binding is used for UI state: @bind-Value on MudTextField for the search query and @bind-ActivePanelIndex on MudTabs for the active tab.
- Image item state uses @bind-Toggled on MudToggleIconButton for IsLiked and IsSelected booleans on ImageViewModel.
- Images are generated in GenerateImageData and stored in _allImages; GroupImages groups them by date string for display.
- Infinite scroll is handled by OnScroll receiving ScrollEventArgs from MudScrollToTop and calling LoadImages when near the bottom.
- Loading state toggles _isLoading and shows MudProgressCircular while fake network latency (Task.Delay) simulates retrieval.
## Styling
- Uses MudBlazor components and utility classes (d-flex, pa-4, mx-*, typographic helpers).
- Custom CSS in GoogleImageSearch.razor.css implements .image-gallery-container scrolling height, .image-card positioning, hover .image-overlay opacity transition, and overlay button styles.
- Theme tokens appear (var(--mud-palette-lines-default), var(--mud-default-borderradius)).
- Responsive grid behavior relies on MudGrid/MudItem breakpoints (xs, sm, md, lg) provided in the markup.
## Reuse steps
1. Add MudBlazor NuGet and call builder.Services.AddMudServices() in Program.cs; import MudBlazor namespace in _Imports.razor.
2. Include MudBlazor CSS and any theme setup in index.html/_Host.cshtml.
3. Copy the .razor and .razor.css files and the ImageViewModel class into the project.
4. Replace GenerateImageData with real API calls and map responses to ImageViewModel; remove Task.Delay used for demo.
5. Optionally add JS interop to compute accurate container clientHeight or use MudVirtualize for large lists.
## Limitations & next steps
- Demo uses generated placeholder data and Task.Delay; no network/API wiring is included.
- Scroll logic uses a fixed clientHeight value for the trigger; replace with JS interop or MudVirtualize for robust infinite scroll.
- No persistence or server-side selection/like handling; state is local to the component.
- Accessibility, keyboard navigation, image lazy-loading, and pagination controls are not implemented and should be added for production.
- Authentication, rate limiting, and real image licensing checks are outside the sample scope.