<div class="flex flex-col gap-y-4">
  <section>
    <.title>
      <.a href={~p"/writing"}>writing</.a>
    </.title>
    <ul class="flex flex-col">
      <li :for={post <- @posts}>
        <.link href={~p"/writing/#{post}"} class="flex flex-row justify-between group">
          <span class="group-hover:underline">
            <%= if post.title do %>
              {post.title}
            <% else %>
              (no title)
            <% end %>
          </span>
          <.timex
            value={post.inserted_at}
            format="{YYYY}-{0M}-{0D}"
            class="text-gray-500 text-nowrap"
          />
        </.link>
      </li>
    </ul>
  </section>

  <section>
    <.title>
      <.a href={~p"/microblog"}>microblog</.a>
    </.title>
    <ul class="flex flex-col">
      <li :for={status <- @statuses}>
        <.link href={~p"/microblog/#{status}"} class="flex flex-row justify-between group">
          <span class="group-hover:underline overflow-hidden text-ellipsis text-nowrap">
            {status.body}
          </span>
          <.timex
            value={status.inserted_at}
            format="{relative}"
            formatter={:relative}
            class="text-gray-500 text-nowrap"
          />
        </.link>
      </li>
    </ul>
  </section>
</div>