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

Update comment style
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 3m10s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2025-03-28 21:31:26 +00:00
parent ad82326eb9
commit 907da404b2
1 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/ui/Comments.tsx
View File

@ -26,28 +26,32 @@ type CommentsListProps = {
Comments.List = function List({comments}: CommentsListProps) { Comments.List = function List({comments}: CommentsListProps) {
return ( return (
<section> <>
<h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4"> {comments.length > 0 &&
Comments <section>
</h3> <h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4">
{comments.map((comment) => ( Comments
<article key={comment.id} className="flex gap-x-4 py-5"> </h3>
<Image src={comment.user.image} alt={comment.user.name} width={64} height={64} {comments.map((comment) => (
className="size-12 rounded-full"/> <article key={comment.id} className="flex gap-x-4 py-5">
<div className="flex-auto"> <Image src={comment.user.image} alt={comment.user.name} width={64} height={64}
<div className="flex items-baseline gap-x-1"> className="size-12 rounded-full"/>
<p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">{comment.user.name}</p> <div className="flex-auto">
<p className="text-sm text-zinc-500 dark:text-zinc-400"> <div className="flex items-baseline gap-x-1">
<time dateTime={comment.created_at}> <p className="font-semibold text-sm text-zinc-800 dark:text-zinc-100">{comment.user.name}</p>
<span>&middot; {`${formatDistanceToNow(comment.created_at)} ago`}</span> <p className="text-sm text-zinc-500 dark:text-zinc-400">
</time> <time dateTime={comment.created_at}>
</p> <span>&middot; {`${formatDistanceToNow(comment.created_at)} ago`}</span>
</div> </time>
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{comment.content}</p> </p>
</div> </div>
</article> <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400 max-w-xl">{comment.content}</p>
))} </div>
</section> </article>
))}
</section>
}
</>
) )
} }