<div class="flex flex-row mt-2">
    <p class="ml-3 font-bold text-justify grow">علائم از چند ساعت پیش شروع شده است ؟</p>
    <div class="flex flex-row">
        <MudIconButton @onclick="IncreaseHour" DisableElevation="true" Class="bg-white rounded-full"
            Icon="@Icons.Material.Filled.KeyboardArrowUp" Variant="Variant.Filled" />
        <p class="my-auto ml-1 mr-2 text-xl font-extrabold">@HourCounter</p>
        <p class="my-auto ml-2 font-extrabold">ساعت</p>
        <MudIconButton @onclick="DecreaseHour" DisableElevation="true" Class="bg-white rounded-full"
            Icon="@Icons.Material.Filled.KeyboardArrowDown" Variant="Variant.Filled" />
    </div>
</div>


@code {
    public int HourCounter { get; set; }
    private void IncreaseHour() => HourCounter++;
    private void DecreaseHour() => HourCounter--;
}