94 lines
4.2 KiB
JavaScript
94 lines
4.2 KiB
JavaScript
import React, { useMemo } from 'react'
|
||
import ArtworkBreadcrumbs from './ArtworkBreadcrumbs'
|
||
import ArtworkFormatBadges from './ArtworkFormatBadges'
|
||
|
||
function formatCount(value) {
|
||
const number = Number(value || 0)
|
||
if (number >= 1_000_000) return `${(number / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
|
||
if (number >= 1_000) return `${(number / 1_000).toFixed(1).replace(/\.0$/, '')}k`
|
||
return `${number}`
|
||
}
|
||
|
||
function formatDate(value) {
|
||
if (!value) return '—'
|
||
try {
|
||
return new Date(value).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
|
||
} catch {
|
||
return '—'
|
||
}
|
||
}
|
||
|
||
export default function ArtworkDetailsDrawer({ isOpen, onClose, artwork, stats }) {
|
||
const width = artwork?.dimensions?.width || artwork?.width || 0
|
||
const height = artwork?.dimensions?.height || artwork?.height || 0
|
||
|
||
const fileType = useMemo(() => {
|
||
const mime = artwork?.file?.mime_type || artwork?.mime_type || ''
|
||
if (mime) return mime
|
||
const url = artwork?.file?.url || artwork?.thumbs?.xl?.url || ''
|
||
const ext = url.split('.').pop()
|
||
return ext ? ext.toUpperCase() : '—'
|
||
}, [artwork])
|
||
|
||
if (!isOpen) return null
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[70]">
|
||
<button
|
||
type="button"
|
||
aria-label="Close details"
|
||
className="absolute inset-0 bg-black/55 backdrop-blur-sm"
|
||
onClick={onClose}
|
||
/>
|
||
|
||
<div className="absolute inset-x-0 bottom-0 max-h-[90vh] overflow-y-auto rounded-t-3xl border border-white/10 bg-nova-900/85 p-5 backdrop-blur xl:inset-auto xl:right-6 xl:top-24 xl:w-[34rem] xl:rounded-3xl xl:border-white/15 xl:p-6">
|
||
<div className="mb-4 flex items-center justify-between">
|
||
<h2 className="text-base font-semibold text-white">Details</h2>
|
||
<button
|
||
type="button"
|
||
aria-label="Close details drawer"
|
||
onClick={onClose}
|
||
className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-white/15 bg-white/5 text-white/80 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
|
||
>
|
||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-white/10 bg-black/15 p-4">
|
||
<ArtworkBreadcrumbs artwork={artwork} />
|
||
</div>
|
||
|
||
<dl className="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
|
||
<div className="rounded-xl border border-white/10 bg-black/20 px-3 py-2.5 sm:col-span-2">
|
||
<dt className="text-soft">Resolution</dt>
|
||
<dd className="mt-1 font-medium text-white">{width > 0 && height > 0 ? `${width} × ${height}` : '—'}</dd>
|
||
<ArtworkFormatBadges width={width} height={height} className="mt-2" />
|
||
</div>
|
||
<div className="rounded-xl border border-white/10 bg-black/20 px-3 py-2.5">
|
||
<dt className="text-soft">Upload date</dt>
|
||
<dd className="mt-1 font-medium text-white">{formatDate(artwork?.published_at)}</dd>
|
||
</div>
|
||
<div className="rounded-xl border border-white/10 bg-black/20 px-3 py-2.5">
|
||
<dt className="text-soft">File type</dt>
|
||
<dd className="mt-1 font-medium text-white">{fileType}</dd>
|
||
</div>
|
||
<div className="rounded-xl border border-white/10 bg-black/20 px-3 py-2.5">
|
||
<dt className="text-soft">Views</dt>
|
||
<dd className="mt-1 font-medium text-white">{formatCount(stats?.views)}</dd>
|
||
</div>
|
||
<div className="rounded-xl border border-white/10 bg-black/20 px-3 py-2.5">
|
||
<dt className="text-soft">Downloads</dt>
|
||
<dd className="mt-1 font-medium text-white">{formatCount(stats?.downloads)}</dd>
|
||
</div>
|
||
<div className="rounded-xl border border-white/10 bg-black/20 px-3 py-2.5">
|
||
<dt className="text-soft">Favorites</dt>
|
||
<dd className="mt-1 font-medium text-white">{formatCount(stats?.favorites)}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|