98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
import React from 'react'
|
|
|
|
function timeAgo(dateStr) {
|
|
if (!dateStr) return ''
|
|
const date = new Date(dateStr)
|
|
const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
|
|
if (seconds < 60) return 'just now'
|
|
const minutes = Math.floor(seconds / 60)
|
|
if (minutes < 60) return `${minutes}m ago`
|
|
const hours = Math.floor(minutes / 60)
|
|
if (hours < 24) return `${hours}h ago`
|
|
const days = Math.floor(hours / 24)
|
|
if (days < 365) return `${days}d ago`
|
|
return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
|
|
}
|
|
|
|
function Avatar({ user, size = 36 }) {
|
|
if (user?.avatar_url) {
|
|
return (
|
|
<img
|
|
src={user.avatar_url}
|
|
alt={user.name || user.username || ''}
|
|
width={size}
|
|
height={size}
|
|
className="rounded-full object-cover shrink-0"
|
|
style={{ width: size, height: size }}
|
|
loading="lazy"
|
|
/>
|
|
)
|
|
}
|
|
const initials = (user?.name || user?.username || '?').slice(0, 1).toUpperCase()
|
|
return (
|
|
<span
|
|
className="flex items-center justify-center rounded-full bg-neutral-700 text-sm font-bold text-white shrink-0"
|
|
style={{ width: size, height: size }}
|
|
>
|
|
{initials}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default function ArtworkComments({ comments = [] }) {
|
|
if (!comments || comments.length === 0) return null
|
|
|
|
return (
|
|
<section aria-label="Comments">
|
|
<h2 className="text-base font-semibold text-white mb-4">
|
|
Comments{' '}
|
|
<span className="text-neutral-500 font-normal">({comments.length})</span>
|
|
</h2>
|
|
|
|
<ul className="space-y-5">
|
|
{comments.map((comment) => (
|
|
<li key={comment.id} className="flex gap-3">
|
|
{comment.user?.profile_url ? (
|
|
<a href={comment.user.profile_url} className="shrink-0 mt-0.5">
|
|
<Avatar user={comment.user} size={36} />
|
|
</a>
|
|
) : (
|
|
<span className="shrink-0 mt-0.5">
|
|
<Avatar user={comment.user} size={36} />
|
|
</span>
|
|
)}
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-baseline gap-2 flex-wrap">
|
|
{comment.user?.profile_url ? (
|
|
<a
|
|
href={comment.user.profile_url}
|
|
className="text-sm font-medium text-white hover:underline"
|
|
>
|
|
{comment.user.name || comment.user.username || 'Member'}
|
|
</a>
|
|
) : (
|
|
<span className="text-sm font-medium text-white">
|
|
{comment.user?.name || comment.user?.username || 'Member'}
|
|
</span>
|
|
)}
|
|
<time
|
|
dateTime={comment.created_at}
|
|
title={comment.created_at ? new Date(comment.created_at).toLocaleString() : ''}
|
|
className="text-xs text-neutral-500"
|
|
>
|
|
{timeAgo(comment.created_at)}
|
|
</time>
|
|
</div>
|
|
|
|
<p className="mt-1 text-sm text-neutral-300 whitespace-pre-line break-words leading-relaxed">
|
|
{comment.content}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|