33 lines
1.4 KiB
JavaScript
33 lines
1.4 KiB
JavaScript
import React from 'react'
|
||
import ArtworkBreadcrumbs from './ArtworkBreadcrumbs'
|
||
|
||
export default function ArtworkMeta({ artwork }) {
|
||
const author = artwork?.user?.name || artwork?.user?.username || 'Artist'
|
||
const publishedAt = artwork?.published_at
|
||
? new Date(artwork.published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
|
||
: '—'
|
||
const width = artwork?.dimensions?.width || 0
|
||
const height = artwork?.dimensions?.height || 0
|
||
|
||
return (
|
||
<div className="rounded-xl border border-nova-700 bg-panel p-5">
|
||
<h1 className="text-xl font-semibold text-white sm:text-2xl">{artwork?.title}</h1>
|
||
<ArtworkBreadcrumbs artwork={artwork} />
|
||
<dl className="mt-3 grid grid-cols-1 gap-3 text-sm text-soft sm:grid-cols-2">
|
||
<div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2">
|
||
<dt>Author</dt>
|
||
<dd className="text-white">{author}</dd>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2">
|
||
<dt>Upload date</dt>
|
||
<dd className="text-white">{publishedAt}</dd>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 rounded-lg bg-nova-900/30 px-3 py-2 sm:col-span-2">
|
||
<dt>Resolution</dt>
|
||
<dd className="text-white">{width > 0 && height > 0 ? `${width} × ${height}` : '—'}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
)
|
||
}
|