Neighbourhood.omg.lol/Components/Pages/Person.razor

@page "/person/{Address}"
@inject State State

<div class="row center-align">
  <h3><i class="fa-solid fa-fw fa-at"></i>@Address</h3>
</div>
<div class="row center-align">
  <img class="profile avatar" src="https://profiles.cache.lol/@Address/picture" alt="@Address" />
</div>

<div id="bio" class="center-align max">
  @if (bio == null)
  {
    <p><em>Getting Bio...</em></p>
  }
  else {
    @bio
  }
</div>

<div class="responsive">
  <div class="tabs">
    <a data-ui="#statuses" class="active">
      <i class="fa-solid fa-message-smile"></i>
      <span>Status.lol</span>
    </a>
    <a data-ui="#pics">
      <i class="fa-solid fa-images"></i>
      <span>Some.pics</span>
    </a>
  </div>
  <div id="statuses" class="page padding active">
    <StatusList StatusFunc="@State.VirtualStatusesFunc(Address)"></StatusList>
  </div>
  
  <div id="pics" class="page padding">
    @if(Editable){
      <EditPicDialog @ref="editPicDialog" id="EditPicModal"></EditPicDialog>
    }
    <PicList PicsFunc="@State.VirtualPicsFunc(Address)" Editable="@Editable" Dialog="@editPicDialog"></PicList>
  </div>
</div>

@code {
  [Parameter]
  public string Address { get; set; }

  private EditPicDialog? editPicDialog { get; set; }

  private bool Editable { 
    get => Address == State.SelectedAddressName;
  }

  private MarkupString? bio;

  protected override async Task OnInitializedAsync() {
    bio = await State.GetBio(Address);
  }
}