@page "/compoflipper"

@rendermode RenderMode.InteractiveServer

<h3>Flipper</h3>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<div>
    The <code>FluentFlipper</code> wraps a web component <code>flipper</code>.
</div>


<h4 class="mt-4">Default Example</h4>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
    <h5>Previous</h5>
    <FluentFlipper Direction="FlipperDirection.Previous"/>

    <h5>Next</h5>
    <FluentFlipper Direction="FlipperDirection.Next" />

    <h5>With custom icons (Previous)</h5>
    <FluentFlipper Direction="FlipperDirection.Previous">
        <FluentIcon Value="@(new Icons.Regular.Size16.ArrowCircleLeft())" Color="Color.Accent" Slot="previous" />
    </FluentFlipper>
    <h5>With custom icons (Next)</h5>
    <FluentFlipper Direction="FlipperDirection.Next">
        <FluentIcon Value="@(new Icons.Regular.Size16.ArrowCircleRight())" Color="Color.Accent" Slot="next" />
    </FluentFlipper>
</FluentCard>

@code {

}