Neighbourhood.omg.lol/Components/PicCard.razor

@inject IJSRuntime JS

<article class="pic no-padding">
  <img src="@Pic!.Url" loading="lazy">
  <div class="padding row">
    <div class="emoji" data-emoji="🖼️">🖼️</div>
    <div class="max">
      <nav>
        <a class="author" href="/person/@Pic.Address#pics">
          <i class="fa-solid fa-fw fa-at"></i>@Pic.Address
        </a>
        <span class="max"></span>
      </nav>
      @if(!string.IsNullOrWhiteSpace(Pic.Description)){
        <p>@((MarkupString)Pic.DescriptionHtml)</p>
      }
      else {
        <div class="padding padding yellow-2-bg yellow-9-fg">
          <i class="fa-solid fa-triangle-exclamation"></i>
          <span>This picture needs a description in order to be shared.</span>
        </div>
      }
      <nav>
        <a class="chip transparent-border">
          <i class="fa fa-clock"></i> @Pic.RelativeTime
        </a>
        <div class="max"></div>
        @if(Editable) {
          <button @onclick="EditPic"><i class="fa-solid fa-pencil"></i> Edit</button>
        }
        <button class="transparent circle" @onclick="ShareClick">
          <i class="fa-solid fa-share-nodes"></i>
        </button>
      </nav>
    </div>
  </div>
</article>

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

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

  public async Task ShareClick(EventArgs e){
    await Share.Default.RequestAsync(new ShareTextRequest{
      Uri = Pic!.Url,
      Text = Pic!.Description,
      Title = "I saw this on some.pics",
      Subject = "I saw this on some.pics"
    });
  }
}