Index.razor

@page "/"
@namespace MudExtensions.Docs.Pages
@inject MudExtensionsDocsService DocsService
@inject NavigationManager NavigationManager
@using MudExtensions.Docs.Shared
@using System.Runtime.Versioning
@inject IScrollManager ScrollManager

@if (_navigating)
{
    <FixedTransition Component="_searchedComponent" FadeIn="true" />
}

<MudScrollToTop>
    <MudFab Color="Color.Secondary" StartIcon="@Icons.Material.Filled.ArrowUpward" />
</MudScrollToTop>

<MudAnimate @ref="_animate" Selector=".card-blur" AnimationType="AnimationType.Blur" Duration="0.3" Value="0" ValueSecondary="120" />
<MudInputStyler Selector=".search-style" BaseColor="var(--mud-palette-secondary)" Always="true" />

<MudContainer Class="d-flex flex-column align-center justify-start pt-4 px-4 top-container" MaxWidth="MaxWidth.False">
    <div class="d-flex justify-center mt-2">
        <MudText Class="slogan" Align="Align.Center">The</MudText>
        <MudText Class="slogan slogan-sec slogan-ext" Align="Align.Center" Color="Color.Primary">Mu<MudText Class="slogan" Inline="true">d</MudText></MudText>
    </div>
    <MudText Class="slogan2 mt-n4" Align="Align.Center" Color="Color.Secondary">Secondary</MudText>
    <MudDivider Style="width: 24vw" />
    <div class="sub-slogan-container px-4 mt-8">
        <MudText Class="sub-slogan" Align="Align.Center">Your<MudText Class="sub-slogan ps-2" Inline="true" Color="Color.Secondary">ultimate</MudText><MudText Class="sub-slogan">MudBlazor extension.</MudText></MudText>
    </div>

    <div class="d-flex align-baseline gap-2 mt-2 justify-center mb-4">
        <MudText Typo="Typo.subtitle2" Align="Align.Center">by</MudText>
        <MudLink Typo="Typo.subtitle2" Href="https://github.com/CodeBeamOrg" Target="_blank" Color="Color.Secondary" Underline="Underline.Hover">CodeBeam</MudLink>
    </div>

    <div class="d-flex align-center gap-4 mt-4">
        <MudTooltip Text="Check Repository" Delay="300" Color="Color.Secondary">
            <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Href="https://github.com/CodeBeamOrg/CodeBeam.MudBlazor.Extensions" Target="_blank" Color="Color.Secondary" Variant="Variant.Outlined" />
        </MudTooltip>
        <MudTooltip Text="Install From NuGet" Delay="300" Color="Color.Secondary">
            <MudIconButton Icon="@Icons.Material.Filled.Download" Href="https://www.nuget.org/packages/CodeBeam.MudBlazor.Extensions" Target="_blank" Color="Color.Secondary" Variant="Variant.Outlined" />
        </MudTooltip>
        <MudTooltip Text="Try Components Online" Delay="300" Color="Color.Secondary">
            <MudIconButton Icon="@Icons.Material.Filled.PlayArrow" Href="https://trymudextensions.pages.dev/" Target="_blank" Color="Color.Secondary" Variant="Variant.Outlined" />
        </MudTooltip>
        <MudTooltip Text="Be a Sponsor" Delay="300" Color="Color.Secondary">
            <MudIconButton Icon="@Icons.Material.Filled.VolunteerActivism" Href="/beasponsor" Color="Color.Secondary" Variant="Variant.Outlined" />
        </MudTooltip>
    </div>

    <div class="d-flex justify-center my-4">
        <MudAutocomplete @bind-Value="_searchedComponent" @bind-Value:after="NavigateSelectedComponent" SearchFunc="@ComponentSearch" Class="search-style" Style="width: calc(50px + 50vw)" MinCharacters="1"
                         ProgressIndicatorColor="Color.Secondary" Variant="Variant.Outlined" Placeholder="What are you looking for?" Clearable="true" AdornmentIcon="@Icons.Material.Filled.Search"
                         Adornment="Adornment.Start" AdornmentColor="Color.Secondary" ToStringFunc="@(e => e?.Component?.Name.Replace("`1", null))" MaxItems="null"
                         HelperText='Write "mud" to see all. Also can search from labels - write "utility".'>
            <ItemTemplate>
                <MudStack Spacing="0">
                    @context?.Component?.Name.Replace("`1", null)
                    <MudStack Row="true" Spacing="1">
                        <MudChip T="string" Class="ms-n1" Text="@(context?.Usage.ToDescriptionString())" Size="Size.Small" Color="Color.Primary" />
                        <MudChip T="string" Text="@(context?.IsUnique == true ? "Unique" : "Extended")" Size="Size.Small" Color="Color.Secondary" />
                        @if (context?.IsMaterial3 == true)
                        {
                            <MudChip T="string" Text="Material 3" Size="Size.Small" Color="Color.Secondary" />
                        }

                    </MudStack>
                </MudStack>
            </ItemTemplate>
            <NoItemsTemplate>
                Nothing found. Try something else?
            </NoItemsTemplate>
        </MudAutocomplete>
    </div>

    <div class="d-flex align-baseline gap-2 justify-center mt-16 mb-8 card-blur">
        <MudGrid Class="justify-center">
            <MudItem xs="12" sm="6" md="4" lg="3">
                <MudCard Elevation="0">
                    <MudCardContent>
                        <MudStack>
                            <MudIcon Style="width: 80px; height: 80px" Icon="@Icons.Material.Filled.Webhook" Color="Color.Secondary" />
                            <MudText Typo="Typo.h6" Color="Color.Secondary">OpenSource</MudText>
                            <MudText Class="mt-4">MudExtensions is free forever on personal and commercial use.</MudText>
                        </MudStack>
                    </MudCardContent>
                </MudCard>
            </MudItem>

            <MudItem xs="12" sm="6" md="4" lg="3">
                <MudCard Elevation="0">
                    <MudCardContent>
                        <MudStack>
                            <MudIcon Style="width: 80px; height: 80px" Icon="@Icons.Material.Filled.Widgets" Color="Color.Secondary" />
                            <MudText Typo="Typo.h6" Color="Color.Secondary">Component & Utility</MudText>
                            <MudText Class="mt-4">MudExtensions has 30+ components and utilities from the core library contributors. Suits perfectly with MudBlazor core library.</MudText>
                        </MudStack>
                    </MudCardContent>
                </MudCard>
            </MudItem>

            <MudItem xs="12" sm="6" md="4" lg="3">
                <MudCard Elevation="0">
                    <MudCardContent>
                        <MudStack>
                            <MudIcon Style="width: 80px; height: 80px" Icon="@Icons.Material.Filled.VerticalSplit" Color="Color.Secondary" />
                            <MudText Typo="Typo.h6" Color="Color.Secondary">Unique & Extended</MudText>
                            <MudText Class="mt-4">MudExtensions has unique components that has familiar Mud design. Library also has extended components that adds additional features on current Mud Core components. (While keeping all existing features)</MudText>
                        </MudStack>
                    </MudCardContent>
                </MudCard>
            </MudItem>
        </MudGrid>
    </div>


    <MudGrid Spacing="8">
        @foreach (var group in Enum.GetValues<ComponentUsage>())
        {
            <MudItem xs="12">
                <MudCard Class="py-8" Style="background: var(--mud-palette-background-gray)" Elevation="0">
                    <MudCardHeader>
                        <MudStack Class="mud-width-full" Row="true" Justify="Justify.Center" AlignItems="AlignItems.Center">
                            <MudIcon Icon="@GetSectionIcon(group)" Size="Size.Large" />
                            <MudText Typo="Typo.h4" Color="Color.Secondary">@group.ToDescriptionString()</MudText>
                        </MudStack>

                    </MudCardHeader>
                    <MudCardContent>
                        <MudStack Spacing="8" Row="true" AlignItems="AlignItems.Center" Justify="Justify.Center" Wrap="Wrap.Wrap">
                            @foreach (var comp in _components.Where(x => x.Usage == group))
                            {
                                <ComponentCard Component="comp" Title="@comp.Title" Description="@comp.Description" OnClick="@(async() => await HandleCompCardClick(comp))" />
                            }
                        </MudStack>
                    </MudCardContent>
                </MudCard>
            </MudItem>
        }
    </MudGrid>

    <MudStack Class="mt-4" Justify="Justify.Center">
        <ComponentCard Title="API"
                       Description="A basic API list for all components." />
    </MudStack>

    <MudContainer Class="mt-16" MaxWidth="MaxWidth.Large">
        <MudToolBar Gutters="false" Dense="true">
            <MudText Typo="Typo.body1"><b>OpenSource © 2022-@DateTime.Now.Year CodeBeam.</b> @Version</MudText>
            <MudSpacer />
            <MudText Typo="Typo.body1">Running on <b>.NET</b> @Environment.Version.ToString()</MudText>
        </MudToolBar>
    </MudContainer>
</MudContainer>

<style>
    .slogan {
        color: var(--mud-palette-text-primary);
        font-size: calc(20px + 4vw);
        font-weight: 900;
        font-family: "Roboto";
        letter-spacing: 0;
        transition: all 1s;
        user-select: none;
    }

        .slogan:hover {
            letter-spacing: calc(4px + 2vw);
        }

            .slogan:hover.slogan-ext:after {
                content: "ream";
                color: var(--mud-palette-text-primary);
                letter-spacing: 0;
            }

    .slogan-sec {
        content: "Mud";
    }

    .slogan2 {
        color: var(--mud-palette-text-primary);
        font-size: calc(12px + 1vw);
        font-weight: 900;
        font-family: "Roboto";
        letter-spacing: -0.1vw;
        transition: all 1s;
        user-select: none;
    }

        .slogan2:hover {
            letter-spacing: calc(2px + 1vw);
        }

    .top-container {
        min-height: 100vh;
        background-color: var(--mud-palette-background);
        overflow: hidden;
    }

    .slogan3 {
        color: var(--mud-palette-text-primary);
        font-size: 24px;
        font-weight: 300;
    }

    .sub-slogan {
        font-size: calc(24px + 0.2vw);
        font-weight: 300;
        font-family: "Roboto";
    }

    .sub-slogan-container {
        transition: 1s all;
        border-left: 12px dotted var(--mud-palette-secondary);
        border-right: 12px dotted var(--mud-palette-secondary);
        width: calc(100px + 90vw);
        max-width: 94vw;
    }

        .sub-slogan-container:hover {
            border-left-width: 4px;
            border-right-width: 4px;
            width: 20vw;
            min-width: 180px;
        }
</style>