Files
LazyPM/pkg/web/components/comment.templ
Robin Olsen 2e4185e30f use beads service
use pointes for comments
use htmx routing
2026-02-22 11:03:31 +01:00

104 lines
2.6 KiB
Plaintext

package components
import (
"github.com/LazyBachelor/LazyPM/internal/models"
"github.com/LazyBachelor/LazyPM/pkg/web/components/base"
)
type CommentSectionProps struct {
IssueID string
Comments []*models.Comment
}
templ CommentSection(props CommentSectionProps) {
<div class="w-full max-w-2xl mx-auto mt-8">
<h2 class="text-xl font-semibold mb-4">Comments</h2>
<div id="comments-list" class="space-y-4 mb-6">
if len(props.Comments) == 0 {
<p class="text-base-content/60 italic">No comments yet. Be the first to comment!</p>
} else {
for _, comment := range props.Comments {
@CommentItem(CommentItemProps{Comment: comment})
}
}
</div>
@CommentForm(CommentFormProps{
IssueID: props.IssueID,
})
</div>
}
type CommentListProps struct {
Comments []*models.Comment
}
templ CommentList(props CommentListProps) {
if len(props.Comments) == 0 {
<p class="text-base-content/60 italic">No comments yet. Be the first to comment!</p>
} else {
for _, comment := range props.Comments {
@CommentItem(CommentItemProps{Comment: comment})
}
}
}
type CommentItemProps struct {
Comment *models.Comment
}
templ CommentItem(props CommentItemProps) {
<div class="card bg-base-200 shadow-sm">
<div class="card-body p-4">
<div class="flex items-center justify-between mb-2">
<span class="font-medium text-primary">{ props.Comment.Author }</span>
<span class="text-sm text-base-content/60">{ props.Comment.CreatedAt.Format("Jan 2, 2006 3:04 PM") }</span>
</div>
<p class="whitespace-pre-wrap">{ props.Comment.Text }</p>
</div>
</div>
}
type CommentFormProps struct {
IssueID string
Author string
Text string
Class string
}
templ CommentForm(props CommentFormProps) {
<div class={ "w-full", props.Class }>
<h3 class="text-lg font-medium mb-3">Add a Comment</h3>
<form
class="space-y-3"
hx-post={ "/issues/" + props.IssueID + "/comments" }
hx-target="#comments-list"
hx-swap="beforeend"
hx-on::after-success="this.reset()"
>
@base.Input(base.InputProps{
Name: "author",
Label: "Your Name",
Value: props.Author,
Placeholder: "Enter your name",
Class: "w-full",
Required: true,
})
@base.Textarea(base.TextareaProps{
Name: "text",
Label: "Comment",
Value: props.Text,
Placeholder: "Write your comment here...",
Class: "w-full",
Required: true,
Rows: 4,
})
<button type="submit" class="btn btn-primary">
Post Comment
</button>
</form>
<div id="comment-result" class="mt-2"></div>
</div>
}