HyperCube/Pages/ModalProfile.razor

<div class="modal fadein" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow: hidden">
    <div class="modal-container">
        <div class="modal__body">
            <div class="modal__body__header">
                <div class="modal__body__header__info">
                    <img src="img/packet.svg" alt="">
                    <p>Персональные данные</p>
                </div>
            </div>
            <div class="modal__body__container">
                <div class="modal__body__container__left modal__body__container__left_blackborder modal__body__container__left_flex">
                    <div class="modal__profile__photo">
                        <img src="img/profile_avatar.png" alt="" class="modal__profile__img">
                        <img src="img/camera.png" alt="" class="modal__profile__img__icon">
                    </div>
                    <div class="modal__profile__social">
                        <a href="" class="modal__profile__social__item">
                            <img src="img/facebook_icon.svg" alt="">
                        </a>
                        <a href="" class="modal__profile__social__item">
                            <img src="img/instagram_icon.svg" alt="">
                        </a>
                        <a href="" class="modal__profile__social__item">
                            <img src="img/twitter_icon.svg" alt="">
                        </a>
                        <a href="" class="modal__profile__social__item">
                            <img src="img/pinterest_icon.svg" alt="">
                        </a>
                        <a href="" class="modal__profile__social__item">
                            <img src="img/tiktok.svg" alt="">
                        </a>
                        <a href="" class="modal__profile__social__item">
                            <img src="img/whatsapp.svg" alt="">
                        </a>
                        <a href="" class="modal__profile__social__item">
                            <img src="img/youtube_icon.svg" alt="">
                        </a>
                    </div>
                </div>
                <div class="modal__body__container__right modal__body__container__right_blackborder">
                    <p class="modal__profile__text">@_account.Name</p>
                    <p class="modal__profile__text"> </p>
                    <p class="modal__profile__text modal__profile__text_mb" style="font-size:small">@_account.UUID</p>
                    <p class="modal__profile__text modal__profile__text_mb">@whereFrom</p>
                    <p class="modal__profile__text">@veryfied</p>
                    <p class="modal__profile__text">Статус: @status</p>
                    <p class="modal__profile__text">Рейтинг: @(string.Join(", ", _account.Roles))</p>
                </div>
            </div>
        </div>
        <a class="modal_close" style="cursor:pointer" @onclick="@Close">&#10006;</a>
    </div>
</div>

@code {
    [Inject]
    public IJSRuntime JsRuntime { get; set; }

    [Parameter]
    public RenderFragment Title { get; set; }

    string modalDisplay = "none;";
    Models.AccountModel _account = new();

    /// tmp
    string whereFrom = "г. Санкт-Петербург";
    string veryfied = "Верифицирован";
    string status = "свободен";

    public void Open(Models.AccountModel account)
    {
        JsRuntime.InvokeVoidAsync("BodyScroll", false);
        modalDisplay = "block;";
        if (account != null)
        {
            _account = account;
        }
    }

    public void Close()
    {
        JsRuntime.InvokeVoidAsync("BodyScroll", true);
        modalDisplay = "none";
    }
}