semaphore/routes/_components/Status.html

<article on:click="alert(event)">
    {{#if status.reblog}}
      <div class="header">
        <a href="{{status.account.url}}">{{status.account.username}}</a> boosted
      </div>
    {{/if}}
  <div class="sidebar">
    <Avatar account={{status.reblog ? status.reblog.account : status.account}} />
  </div>
  <div class="content">{{{status.content}}}</div>
  <div class="footer">
    <button type="button">
    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5T1385 1619q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5T365 1569q0-6 2-20l86-500L89 695q-25-27-25-48 0-37 56-46l502-73L847 73q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"/></svg>
    </button>
    <button type="button">
    <svg viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1344 1504q0 13-9.5 22.5t-22.5 9.5H352q-8 0-13.5-2t-9-7-5.5-8-3-11.5-1-11.5V896H128q-26 0-45-19t-19-45q0-24 15-41l320-384q19-22 49-22t49 22l320 384q15 17 15 41 0 26-19 45t-45 19H576v384h576q16 0 25 11l160 192q7 10 7 21zm640-416q0 24-15 41l-320 384q-20 23-49 23t-49-23l-320-384q-15-17-15-41 0-26 19-45t45-19h192V640H896q-16 0-25-12L711 436q-7-9-7-20 0-13 9.5-22.5T736 384h960q8 0 13.5 2t9 7 5.5 8 3 11.5 1 11.5v600h192q26 0 45 19t19 45z"/></svg>
    </button>
    <button type="button">
    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1792 1120q0 166-127 451-3 7-10.5 24t-13.5 30-13 22q-12 17-28 17-15 0-23.5-10t-8.5-25q0-9 2.5-26.5t2.5-23.5q5-68 5-123 0-101-17.5-181t-48.5-138.5-80-101-105.5-69.5-133-42.5-154-21.5-175.5-6H640v256q0 26-19 45t-45 19-45-19L19 685Q0 666 0 640t19-45L531 83q19-19 45-19t45 19 19 45v256h224q713 0 875 403 53 134 53 333z"/></svg>
    </button>
    <button type="button">
    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M576 736v192q0 40-28 68t-68 28H288q-40 0-68-28t-28-68V736q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28H800q-40 0-68-28t-28-68V736q0-40 28-68t68-28h192q40 0 68 28t28 68zm512 0v192q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68V736q0-40 28-68t68-28h192q40 0 68 28t28 68z"/></svg>
    </button>
  </div>
</article>

<style>
  article {
    pointer-events: none;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0;
    border-bottom: 1px solid #ededed;
    display: grid;
    width: 100%;
    grid-template-areas:
        "....... header"
        "sidebar content"
        "....... footer";
    grid-template-columns: 70px 1fr;
  }
  .sidebar {
    grid-area: sidebar;
    display: flex;
  }

  .content {
    margin: 5px;
    grid-area: content;
    word-wrap: break-word;
    overflow: hidden;
    white-space: pre-wrap;
    font-size: 0.9em;
  }

  :global(.content a) {
    pointer-events: auto;
  }

  :global(.header a) {
    pointer-events: auto;
    color: #333;
  }

  :global(.content p) {
    margin: 0 0 10px;
  }

  .header {
    grid-area: header;
    margin: 5px 5px;
  }
  .footer {
    grid-area: footer;
    display: flex;
    margin: 5px;
    justify-content: space-between;
  }

  .footer button {
    pointer-events: auto;
    padding: 0;
    background: none;
    border: none;
  }

  .footer svg {
    pointer-events: none;
    width: 24px;
    height: 24px;
    fill: #859ede;
  }
</style>
<script>
  import Avatar from './Avatar.html'

  export default {
    components: {
      Avatar
    },
    data: () => ({
      status: null
    }),
    methods: {
      alert: function (e) {
        e.preventDefault()
        window.alert(e.target)
      }
    }
  }
</script>