nft-faucet/NftFaucet/Shared/MainLayout.razor

@inherits MainLayoutComponent

<Layout Style="background-color: #FFFFFF; height: 100%;">
    <Content Style="padding: 0 50px; display: flex; flex-direction: column;">
        <PageHeader Class="create-nft-header">
            <PageHeaderTitle>NFT Faucet</PageHeaderTitle>
            <PageHeaderTags>
                <Tag PresetColor="@PresetColor.Blue">Address: @(AppState?.Metamask?.Address ?? "<null>")</Tag>
                <Tag PresetColor="@ChainColor">@("Chain: " + (AppState?.Metamask?.Network?.ToString() ?? "<unknown>") + " (" + (AppState?.Metamask?.ChainId.ToString() ?? "<null>") + ")")</Tag>
            </PageHeaderTags>
        </PageHeader>
        <Steps Current="@(AppState.Navigation.CurrentStep - 1)" Type="navigation" Class="fix-alignment">
            <Step Title="Specify token metadata"/>
            <Step Title="Review metadata details"/>
            <Step Title="Review mint details"/>
            <Step Title="Wait for token minting"/>
        </Steps>
        <div style="flex-grow: 3;">
            @Body
        </div>
        <Affix OffsetBottom="10">
            <div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;">
                <Button Type="@ButtonType.Default" Size="large" Icon="arrow-left" Style="@BackButtonStyle" OnClick="@AppState.Navigation.GoBack">
                    Back
                </Button>
                <Button Type="@ButtonType.Primary" Size="large" Icon="@ForwardButtonIcon" Style="@ForwardButtonStyle" OnClick="@AppState.Navigation.GoForward" Loading="@AppState.Storage.UploadIsInProgress">
                    @ForwardButtonText
                </Button>
            </div>
        </Affix>
    </Content>
</Layout>