Neighbourhood.omg.lol/Components/StatusCard.razor

@inject IJSRuntime JS

<article class="status gray-9-fg" style="background-color:@(Status!.Background)">
  <div class="row">
    <div class="emoji" data-emoji="@Status.EmojiOrDefault">@Status.EmojiOrDefault</div>
    <div class="max">
      <div class="row">
        <a class="author" href="/person/@Status.Address">
          <i class="fa-solid fa-fw fa-at"></i>@Status.Address
        </a>
        <div class="max"></div>
        <button class="transparent circle" @onclick="ShareClick">
          <i class="fa-solid fa-share-nodes"></i>
        </button>
        @if (Editable) {
          <button class="small circle small-elevate" @onclick="EditStatus">
            <i class="fa-solid fa-pencil"></i>
          </button>
        }
      </div>
      @Status.HtmlContent
      <nav class="no-margin">
        <a class="chip transparent-border">
          <i class="fa fa-clock"></i> @Status.RelativeTime
        </a>
        @if (!string.IsNullOrWhiteSpace(Status.ExternalUrl))
        {
          <a class="chip transparent-border" href="@Status.ExternalUrl" target="_blank">
            <i class="fa fa-message-dots"></i> @(new Uri(Status.ExternalUrl).Host)
          </a>
        }
      </nav>    
    </div>
  </div>
</article>

@code {
  [Parameter]
  public Status? Status { get; set; }
  [Parameter]
  public bool Editable { get; set; } = false;
  [Parameter]
  public EditStatusDialog? Dialog { get; set; }

  private async Task EditStatus(EventArgs e) {
    Dialog!.Status = Status;
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("ui", "#" + Dialog?.id);
  }

  public async Task ShareClick(EventArgs e){
    await Share.Default.RequestAsync(new ShareTextRequest{
      Text = $"{Status!.Content}\n- from [@{Status.Address}]({Status.Url})",
      Title = "I saw this on status.lol",
      Subject = "I saw this on status.lol"
    });
  }
}