nyaabooru/resources/views/livewire/posts/view.blade.php

72 lines
2.1 KiB
PHP

<div class="wa-flank wa-align-items-start wa-gap-3xl" style="--flank-size: 20rem;">
{{-- Sidebar --}}
<div class="wa-stack" wire:poll>
{{-- Post navigation --}}
<div class="wa-cluster">
@if ($prev = $post->getPreviousPost())
<wa-icon-button href="{{ url("posts/$prev->id") }}" name="arrow-left" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
@else
<wa-icon-button name="arrow-left" disabled></wa-icon-button>
@endif
@if ($next = $post->getNextPost())
<wa-icon-button href="{{ url("posts/$next->id") }}" name="arrow-right" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
@else
<wa-icon-button name="arrow-right" disabled></wa-icon-button>
@endif
<wa-icon-button href="{{ url("posts/$post->id/edit") }}" name="file-pen" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
<wa-icon-button href="{{ url("posts/$post->id/download") }}" name="download" style="color: var(--wa-color-text-link);"></wa-icon-button>
</div>
<wa-divider></wa-divider>
{{-- Post ID --}}
<div class="wa-cluster">
<wa-icon fixed-width name="hashtag"></wa-icon>
<span>{{ $post->id }}</span>
</div>
{{-- Post author --}}
<div class="wa-cluster">
<wa-icon fixed-width name="user"></wa-icon>
<span>{{ $post->user->name }}</span>
</div>
{{-- Post upload date --}}
<div class="wa-cluster">
<wa-icon fixed-width name="calendar"></wa-icon>
<wa-format-date
month="numeric"
day="numeric"
year="numeric"
hour="numeric"
minute="numeric"
date="{{ $post->created_at }}">
</wa-format-date>
</div>
{{-- Post rating --}}
<div class="wa-cluster">
<wa-icon fixed-width name="face-hand-peeking"></wa-icon>
<span style="color: var(--wa-color-{{ $post->getRatingColor() }}-on-normal);">{{ $post->rating }}</span>
</div>
<wa-divider></wa-divider>
{{-- Tags --}}
<div class="wa-cluster wa-heading-m">
<wa-icon fixed-width name="tags"></wa-icon>
<span>Tags</span>
</div>
</div>
{{-- Main content --}}
<div class="wa-stack wa-gap-2xl" wire:poll>
<livewire:posts.image :$post lazy />
</div>
</div>