123 lines
4.1 KiB
HTML
123 lines
4.1 KiB
HTML
{{ define "content" }}
|
|
<div class="flex flex-col min-h-screen bg-gray-100">
|
|
<!-- Optional Header -->
|
|
<header class="bg-white shadow p-4">
|
|
<h1 class="text-xl font-bold">Community</h1>
|
|
</header>
|
|
|
|
<!-- Scrollable Posts -->
|
|
<main class="flex-1 overflow-y-auto px-2 py-4 max-w-2xl mx-auto space-y-4">
|
|
<!-- Posts Feed -->
|
|
{{range .Posts}}
|
|
<article class="bg-white border-b border-gray-200">
|
|
<!-- Post Header -->
|
|
<div class="flex items-center px-6 py-4">
|
|
<div class="flex-shrink-0">
|
|
<div
|
|
class="w-10 h-10 bg-blue-500 flex items-center justify-center text-white font-semibold"
|
|
>
|
|
{{slice .AuthorName 0 1}}
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-semibold text-gray-900">{{.AuthorName}}</p>
|
|
<p class="text-xs text-gray-500">
|
|
{{.CreatedAt.Format "Jan 2, 2006"}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post Image -->
|
|
{{if .ImageURL}}
|
|
<div class="w-full">
|
|
<img
|
|
src="{{.ImageURL}}"
|
|
alt="Post image"
|
|
class="w-full max-h-96 object-cover"
|
|
onerror="this.parentElement.style.display='none'"
|
|
/>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- Post Actions -->
|
|
<div class="px-6 py-3">
|
|
<div class="flex items-center space-x-6">
|
|
<button
|
|
class="reaction-btn flex items-center space-x-2 text-gray-600 hover:text-blue-500 transition-colors"
|
|
data-post-id="{{.PostID}}"
|
|
data-reaction="like"
|
|
>
|
|
<svg
|
|
class="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V18m-7-8a2 2 0 01-2-2V7a2 2 0 012-2h3.764a2 2 0 011.789 1.106L14 8v2m-7-8V5a2 2 0 012-2h1m-5 10h3m4 3H8"
|
|
></path>
|
|
</svg>
|
|
<span class="text-sm font-medium like-count">0</span>
|
|
</button>
|
|
<button
|
|
class="reaction-btn flex items-center space-x-2 text-gray-600 hover:text-red-500 transition-colors"
|
|
data-post-id="{{.PostID}}"
|
|
data-reaction="dislike"
|
|
>
|
|
<svg
|
|
class="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018c.163 0 .326.02.485.06L17 4m-7 10v-8m7 8a2 2 0 002 2v1a2 2 0 01-2 2h-3.764a2 2 0 01-1.789-1.106L10 16v-2m7 8V19a2 2 0 00-2-2h-1m5-10H12m-4-3h4"
|
|
></path>
|
|
</svg>
|
|
<span class="text-sm font-medium dislike-count">0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Post Content -->
|
|
{{if .Content}}
|
|
<div class="px-6 pb-4">
|
|
<p class="text-gray-900 leading-relaxed">
|
|
<span class="font-semibold">{{.AuthorName}}</span> {{.Content}}
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
</article>
|
|
{{else}}
|
|
<div class="bg-white p-12 text-center">
|
|
<div class="max-w-sm mx-auto">
|
|
<svg
|
|
class="w-16 h-16 mx-auto text-gray-300 mb-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
></path>
|
|
</svg>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No posts yet</h3>
|
|
<p class="text-gray-500">
|
|
Be the first to share something with the community!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|