@page "/eye-dropper"
@inject IStringLocalizer<EyeDroppers> Localizer

<h3>@Localizer["EyeDropperTitle"]</h3>

<h4>@((MarkupString)Localizer["EyeDropperDescription"].Value)</h4>

<Tips class="mt-3">
    <ul class="ul-demo">
        <li>@((MarkupString)Localizer["EyeDropperTips1"].Value)</li>
        <li>@((MarkupString)Localizer["EyeDropperTips2"].Value)</li>
        <li>@((MarkupString)Localizer["EyeDropperTips3"].Value)</li>
        <li>@((MarkupString)Localizer["EyeDropperTips4"].Value)</li>
    </ul>
</Tips>

<DemoBlock Title="@Localizer["EyeDropperNormalTitle"]" Introduction="@Localizer["EyeDropperNormalIntro"]" Name="Normal">
    <Button Text="@Localizer["EyeDropperNormalButtonText"]" OnClick="OnOpen"></Button>

    <div class="mt-3 d-flex">
        <div style="width: 35px; height: 35px; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); margin-right: .5rem; background-color: @ValueString"></div><Display Value="@Value"></Display>
    </div>
</DemoBlock>

