●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Top app bar with search field and account menu (MudAppBar, MudMenu, MudIconButton).
- Responsive navigation drawer with section links (MudDrawer, MudNavMenu, MudNavLink).
- Question feed rendered as cards with counts, title, excerpt, tags and author metadata (MudPaper, MudGrid, MudItem, MudChip, MudAvatar).
- Tabbed feed controls (MudTabs / MudTabPanel) and an action button to ask a question (MudButton).
- Static sample data populated in OnInitialized for demo purposes and a GetTimeAgo helper for relative timestamps.
## Key components
- MudLayout, MudAppBar, MudDrawer, MudMainContent
- MudContainer, MudGrid, MudItem, MudPaper
- MudTabs, MudTabPanel
- MudTextField (search), MudButton, MudMenu, MudMenuItem
- MudChipSet, MudChip, MudAvatar, MudLink
- C#: QuestionViewModel, UserViewModel, OnInitialized, @foreach rendering, @bind-Open
## How it works
- Sample questions initialize in OnInitialized as a List<QuestionViewModel> and render with a Razor @foreach loop.
- Drawer open state is bound via @bind-Open to a private bool and toggled by DrawerToggle().
- UI uses MudBlazor components for layout; MudTextField provides a visual search input but no search logic is wired.
- Tabs are present for filtering categories but do not change the rendered list; tags and title links use MudLink with placeholder Href.
- GetTimeAgo computes relative time strings on render; avatars use external image URLs.
## Styling
- Uses MudBlazor components and theme-driven styles; utility classes like d-flex, ml-2, pa-4, justify-space-between are applied for spacing.
- Responsive behavior relies on MudGrid/MudItem breakpoints (xs/sm) and MudContainer MaxWidth.ExtraLarge.
- Visual elements use MudPaper outlined cards and chips for tags; no Tailwind or Bootstrap-specific frameworks are required beyond utility classes present in markup.
## Reuse steps
1. Add MudBlazor NuGet and call builder.Services.AddMudServices() in Program.cs.
2. Import MudBlazor namespace in _Imports.razor and add MudBlazor CSS/theme to index.html/_Host.
3. Copy QuestionViewModel and UserViewModel or replace with app models and a data service.
4. Place the Razor component in Pages and add a route or navigation link.
5. Replace sample OnInitialized data with injected data services/HTTP calls and implement search, tab filtering, and paging.
6. Wire authentication/authorization for profile/menu actions and the Ask Question flow (dialogs or navigation to a question form).
## Limitations & next steps
- This is a single-page demo generated by Instruct UI; sample data lives in OnInitialized and is not persisted.
- Search input and tab filtering are visual only and require event handlers and data queries to function.
- Navigation links (MudLink/MudNavLink) use placeholder Href values; routing and detail pages must be implemented.
- Consider adding paging, server-side data source, real avatars, optimistic UI updates, and accessibility attributes when integrating.