sloanelybutsurely.com/lib/web/controllers/status_html/show.html.heex

66 lines
2.1 KiB
Text

<div class="max-w-2xl mx-auto">
<div class="flex items-center py-2 px-4 border-x border-gray-200">
<.link
navigate={~p"/microblog"}
class="mr-4 text-gray-500 hover:text-gray-800 flex items-center"
>
<.icon name="hero-arrow-left" class="h-5 w-5" />
</.link>
<h1 class="text-lg font-bold">Post</h1>
</div>
<article class="h-entry p-4 border border-gray-200">
<header class="flex mb-3 justify-between">
<div class="h-card flex items-center gap-3 p-author">
<%= if Core.Author.get(:avatar_url) do %>
<img
src={Core.Author.get(:avatar_url)}
alt={Core.Author.get(:name)}
class="w-10 h-10 rounded-full u-photo"
/>
<% else %>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-xl u-photo">
{Core.Author.get(:avatar_emoji)}
</div>
<% end %>
<div class="flex flex-col">
<p class="p-name font-bold">
{Core.Author.get(:name)}
</p>
<p>
<span class="p-nickname font-normal text-gray-600">
@{Core.Author.get(:username)}
</span>
</p>
</div>
</div>
<%= if @current_user do %>
<.link class="text-sm text-gray-500" navigate={~p"/admin/posts/#{@status}"}>edit</.link>
<% end %>
</header>
<div class="e-content my-4">
<.markdown content={@status.body} />
</div>
<footer class="mt-4 border-t border-gray-200 pt-2 text-sm text-gray-500 flex flex-row justify-between">
<div>
<%= if @status.published_at do %>
<.timex
value={Core.Posts.publish_date_time(@status)}
format="{Mfull} {D}, {YYYY} at {h12}:{m} {AM}"
class="dt-published"
/>
<% end %>
</div>
<div class="flex flex-row gap-x-2">
<%= if @status.mastodon_post do %>
<.link href={@status.mastodon_post.url} target="_blank" class="u-syndication">
tech.lgbt
</.link>
<% end %>
</div>
</footer>
</article>
</div>