r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2025-04-11 20:54:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Create comment component
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 3m13s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2025-03-29 21:15:12 +00:00
parent c796a544ab
commit 47def1dbfe
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/actions/comments.ts
View File

@ -37,9 +37,9 @@ const notificationBody = (comment: { id: number, content: string }, user: { name
}
export async function addComment(prevState: { message: string }, formData: FormData) {
const general_error = 'There was an error with your comment, please try again later.'
const general_error = 'There was a problem with your comment, please try again later.'
const authorisation_error = 'Error, you must be logged in to post a comment.'
const success_message = 'Your comment was submitted and is awaiting approval.'
const success_message = 'Thanks, your comment was submitted and is awaiting approval.'
const schema = z.object({
comment: z.string().min(3).max(255),

36
components/ui/Comments.tsx
View File

@ -20,6 +20,26 @@ type Comment = {
}
}
Comments.Comment = function Comment({comment, isReply = false}: { comment: Comment, isReply?: boolean }) {
return (
<article className="flex gap-x-4 py-5">
<Image src={comment.user.image} alt={comment.user.name} width={64} height={64}
className="size-12 rounded-full"/>
<div className="flex-auto">
<div className="flex items-baseline gap-x-1">
<p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">{comment.user.name}</p>
<p className="text-sm text-zinc-500 dark:text-zinc-400">
<time dateTime={comment.created_at}>
<span>&middot; {`${formatDistanceToNow(comment.created_at)} ago`}</span>
</time>
</p>
</div>
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400 max-w-xl">{comment.content}</p>
</div>
</article>
)
}
type CommentsListProps = {
comments: Comment[]
}
@ -33,21 +53,7 @@ Comments.List = function List({comments}: CommentsListProps) {
Comments
</h3>
{comments.map((comment) => (
<article key={comment.id} className="flex gap-x-4 py-5">
<Image src={comment.user.image} alt={comment.user.name} width={64} height={64}
className="size-12 rounded-full"/>
<div className="flex-auto">
<div className="flex items-baseline gap-x-1">
<p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">{comment.user.name}</p>
<p className="text-sm text-zinc-500 dark:text-zinc-400">
<time dateTime={comment.created_at}>
<span>&middot; {`${formatDistanceToNow(comment.created_at)} ago`}</span>
</time>
</p>
</div>
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400 max-w-xl">{comment.content}</p>
</div>
</article>
<Comments.Comment key={comment.id} comment={comment}/>
))}
</section>
}