twitter-for-coders/views/feed.html

{{define "post-action-bar"}}
<bar class="!p-0 !pt-1 mt-4 bg-gray-800 justify-evenly rounded-full">
  <svg xmlns="http://www.w3.org/2000/svg"
    width="2rem"
    height="2rem"
    viewBox="0 0 2rem 2rem">
    <use href="/icons/reply.svg#img" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg"
    width="2rem"
    height="2rem"
    viewBox="0 0 2rem 2rem">
    <use href="/icons/refresh-cw.svg#img" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg"
    width="2rem"
    height="2rem"
    viewBox="0 0 2rem 2rem">
    <use href="/icons/heart.svg#img" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg"
    width="2rem"
    height="2rem"
    viewBox="0 0 2rem 2rem">
    <use href="/icons/bookmark.svg#img" />
  </svg>
</bar>
{{end}}

<script>
  let theFeed = new PaginateTable("/api/feed/1");
</script>

<div class="p-1" x-data="theFeed">
  <bar class="justify-evenly">
    <img src="/favicon.ico" />
    <b>Notifications</b>
    <svg xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 2rem 2rem">
      <use href="/icons/settings.svg#settings" />
    </svg>
  </bar>

  <template x-for="message in contents">
    <block class="!gap-0 border-t-1 border-gray-600">
      <bar class="justify-between !p-0 mb-3">
        <img src="/favicon.ico" />
        <span>13s</span>
      </bar>

      <block class="!p-0 gap-2 mb-2">
        <p><a x-bind:href="`/post/view/${message.id}/`" x-text="message.text"></a></p>
      </block>

      {{template "post-action-bar"}}
    </block>
  </template>
</div>