51 lines
3.0 KiB
JavaScript
51 lines
3.0 KiB
JavaScript
import React from 'react'
|
|
import ArtworkBreadcrumbs from './ArtworkBreadcrumbs'
|
|
|
|
export default function ArtworkMeta({ artwork }) {
|
|
const publisher = artwork?.publisher || null
|
|
const credits = artwork?.credits || {}
|
|
const primaryAuthor = credits?.primary_author || artwork?.user || null
|
|
const contributors = Array.isArray(credits?.contributors) ? credits.contributors : []
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">{artwork?.title}</h1>
|
|
<div className="mt-4 flex flex-wrap gap-3 text-sm text-slate-300">
|
|
{publisher?.type === 'group' ? (
|
|
<a href={publisher.profile_url} className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100/80">Published by</span>
|
|
<span className="font-semibold">{publisher.name}</span>
|
|
</a>
|
|
) : null}
|
|
{primaryAuthor ? (
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Primary author</span>
|
|
{primaryAuthor.profile_url ? <a href={primaryAuthor.profile_url} className="font-semibold text-white hover:text-sky-200">{primaryAuthor.name || primaryAuthor.username}</a> : <span className="font-semibold text-white">{primaryAuthor.name || primaryAuthor.username}</span>}
|
|
</span>
|
|
) : null}
|
|
{contributors.length > 0 ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-white">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Contributors</span>
|
|
</span>
|
|
{contributors.map((item) => {
|
|
const label = item.name || item.username
|
|
|
|
return (
|
|
<span key={item.id || label} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-white">
|
|
{item.profile_url ? <a href={item.profile_url} className="font-semibold text-white hover:text-sky-200">{label}</a> : <span className="font-semibold text-white">{label}</span>}
|
|
{item.credit_role ? <span className="text-slate-400">{item.credit_role}</span> : null}
|
|
{item.is_primary ? <span className="rounded-full border border-emerald-300/30 bg-emerald-400/12 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Lead support</span> : null}
|
|
</span>
|
|
)
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="mt-3">
|
|
<ArtworkBreadcrumbs artwork={artwork} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|