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

Update comments section
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 3m12s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2025-04-03 23:11:25 +01:00
parent e2306d6200
commit d117ef8d6b
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/actions/comments.ts
View File

@ -42,7 +42,7 @@ export async function addComment(prevState: { message: string }, formData: FormD
const success_message = 'Thanks, your comment was submitted and is awaiting approval.' const success_message = 'Thanks, your comment was submitted and is awaiting approval.'
const schema = z.object({ const schema = z.object({
comment: z.string().min(3).max(255).trim(), comment: z.string().min(1).max(255).trim(),
slug: z.string(), slug: z.string(),
parent_id: z.string().optional() parent_id: z.string().optional()
}) })

8
components/ui/Comments.tsx
View File

@ -39,11 +39,11 @@ Comments.ReplyButton = function ReplyButton({comment}: ReplyButton) {
return ( return (
<button <button
className="flex mt-4 text-sm gap-x-2 items-center group hover:dark:text-indigo-500 text-zinc-800 dark:text-zinc-100" className="flex mt-4 text-sm gap-x-2 items-center group active:dark:text-indigo-500 text-zinc-800 dark:text-zinc-100"
onClick={handleReplyButton} onClick={handleReplyButton}
> >
<ArrowLeftIcon <ArrowLeftIcon
className="w-4 h-4 stroke-zinc-500 dark:stroke-zinc-400 group-hover:dark:stroke-indigo-500 group-hover:stroke-indigo-500"/>Reply className="w-4 h-4 stroke-zinc-500 dark:stroke-zinc-400 group-active:dark:stroke-indigo-500 group-active:stroke-indigo-500"/>Reply
</button> </button>
) )
} }
@ -60,13 +60,13 @@ Comments.Comment = function Comment({comment, children, isReply = false}: {
<article <article
className={clsx('flex gap-x-4 py-5', isReply && 'ml-[62px]')}> className={clsx('flex gap-x-4 py-5', isReply && 'ml-[62px]')}>
<Image src={comment.user.image} alt={comment.user.name} width={64} height={64} <Image src={comment.user.image} alt={comment.user.name} width={64} height={64}
className="size-12 rounded-full"/> className={clsx('rounded-full', isReply ? 'size-8' : 'size-12')}/>
<div className="flex-auto"> <div className="flex-auto">
<div className="flex items-baseline gap-x-1"> <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="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"> <p className="text-sm text-zinc-500 dark:text-zinc-400">
<time dateTime={comment.created_at}> <time dateTime={comment.created_at}>
<span>&middot; {`${formatDistanceToNow(comment.created_at)} ago`}</span> <span>&middot; {`${formatDistanceToNow(comment.created_at, {addSuffix: true})}`}</span>
</time> </time>
</p> </p>
</div> </div>