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

Comment form improvements
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 3m6s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2025-03-27 16:35:18 +00:00
parent a6e8c373b8
commit fd33bcced9
1 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
components/ui/Comments.tsx
View File

@ -1,6 +1,6 @@
'use client' 'use client'
import React, {useActionState} from 'react' import React, {ReactNode, useActionState} from 'react'
import {useSession} from 'next-auth/react' import {useSession} from 'next-auth/react'
import Image from 'next/image' import Image from 'next/image'
import useSWR from 'swr' import useSWR from 'swr'
@ -27,36 +27,51 @@ type CommentsListProps = {
} }
Comments.List = function List({comments}: CommentsListProps) { Comments.List = function List({comments}: CommentsListProps) {
if (!(comments?.length > 0)) return null
return ( return (
<section> <section>
<h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4"> <h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4">
{comments?.length > 0 ? 'Comments' : 'No comments yet'} Comments
</h3> </h3>
{comments && {comments.map((comment) => (
<> <article key={comment.id} className="flex gap-x-4 py-5">
{comments.map((comment) => ( <Image src={comment.user.image} alt={comment.user.name} width={64} height={64}
<article key={comment.id} className="flex gap-x-4 py-5"> className="size-12 rounded-full"/>
<Image src={comment.user.image} alt={comment.user.name} width={64} height={64} <div className="flex-auto">
className="size-12 rounded-full"/> <div className="flex items-baseline gap-x-1">
<div className="flex-auto"> <p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">{comment.user.name}</p>
<div className="flex items-baseline gap-x-2"> <p className="text-sm text-zinc-500 dark:text-zinc-400">
<p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">{comment.user.name}</p> <time dateTime={comment.created_at}>
<p className="text-sm text-zinc-500 dark:text-zinc-400"> <span>&middot; {formatDate(comment.created_at)}</span>
<time dateTime={comment.created_at}> </time>
<span>&middot; {formatDate(comment.created_at)}</span> </p>
</time> </div>
</p> <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{comment.content}</p>
</div> </div>
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{comment.content}</p> </article>
</div> ))}
</article>
))}
</>
}
</section> </section>
) )
} }
type CommentsStatusProps = {
children: ReactNode
}
Comments.Status = function Status({children}: CommentsStatusProps) {
const conditions = ['error', 'problem']
const isError = conditions.some(condition => children?.toString().toLowerCase().includes(condition))
return (
<p aria-live="polite" role="status"
className={clsx('text-base font-semibold',
!isError ? 'text-green-800 dark:text-green-600' : 'text-red-800 dark:text-red-600')}>
{children}
</p>
)
}
type InitialState = { type InitialState = {
message: string message: string
} }
@ -103,12 +118,10 @@ Comments.Form = function Form({slug}: CommentsProps) {
/> />
</div> </div>
<input type="hidden" name="slug" value={slug}/> <input type="hidden" name="slug" value={slug}/>
<div className="mt-2 flex justify-between items-center"> <div className="mt-2 flex justify-between items-start gap-x-4">
<p aria-live="polite" role="status" className={clsx('text-base font-semibold', <Comments.Status>
(state?.message !== null && !state?.message.toLowerCase().includes('error')
? 'text-green-800 dark:text-green-600' : 'text-red-800 dark:text-red-600'))}>
{state?.message} {state?.message}
</p> </Comments.Status>
<Button variant="secondary" disabled={pending}> <Button variant="secondary" disabled={pending}>
Comment Comment
</Button> </Button>