@page "/layoutspacer"

@rendermode RenderMode.InteractiveServer

<FluentLabel Typo="Typography.H3">Spacer</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
    The <code>FluentSpacer</code> component offers a space between components.
</FluentLabel>

<FluentLabel class="my-3" Typo="Typography.H4">Spacer with flexible(default) width</FluentLabel>
<FluentCard Width="auto" Height="auto" Style="display:flex">
    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Neutral" />
    <FluentSpacer/>
    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Accent" />
    <FluentSpacer />
    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Warning" />
    <FluentSpacer />
    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Info" />
</FluentCard>

<FluentLabel class="my-3" Typo="Typography.H4">Spacer with set width</FluentLabel>
<FluentCard Width="auto" Height="auto">
    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Neutral" />
    <FluentSpacer Width="50"/>
    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Accent" />
    <FluentSpacer Width="50" />
    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Warning" />
    <FluentSpacer Width="50" />
    <FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Info" />
</FluentCard>

@code {

}