Files
IGP-Fan-Reference/docs/AI Gen Docs/components.md
T
2026-05-31 14:33:58 -04:00

1.6 KiB

UI Components and Layout

The application uses a modular component architecture, leveraging the MudBlazor library for UI elements.

Reusable Components (Components project)

Shared components are located in the Components project, categorized by their function:

  • Display: Components for visualizing data (e.g., EntityIcon, StatDisplay).
  • Inputs: Specialized input fields for game data.
  • Layout: Reusable layout sections like FooterComponent.
  • Navigation: Components like SearchButtonComponent and NavigationTracker.
  • Feedback: UI elements for user interactions like ConfirmationDialog.

Key Layout Files

  • App.razor: Configures the Blazor router and hosts global "Portals". Portals are components that stay active across all pages (e.g., EntityDialogPortal, ToastPortal).
  • PageLayout.razor: The standard layout for all pages. It includes:
    • MudAppBar: The top navigation bar.
    • MudDrawer: A side navigation menu (primarily for mobile/small screens).
    • MudMainContent: The area where page-specific content is rendered.

Design Patterns

  • Portals: Used for dialogs and notifications to ensure they are rendered correctly in the DOM hierarchy regardless of which page is active. They listen to events from their corresponding services (e.g., EntityDialogService).
  • Data-Driven UI: Navigation links and unit lists are driven by static data classes in the Model project (e.g., WebsiteData.GetPages()), making it easy to add new sections.
  • Dark Mode: The site is designed primarily for dark mode, managed via MudThemeProvider.