45 lines
2.1 KiB
React
45 lines
2.1 KiB
React
import React from 'react'
|
||
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}`
|
||
}
|
||
|
||
export default function ArtworkStats({ artwork, stats: statsProp }) {
|
||
const stats = statsProp || artwork?.stats || {}
|
||
const width = artwork?.dimensions?.width || 0
|
||
const height = artwork?.dimensions?.height || 0
|
||
|
||
return (
|
||
<section className="rounded-xl border border-nova-700 bg-panel p-5 shadow-lg shadow-deep/30">
|
||
<h2 className="text-xs font-semibold uppercase tracking-wide text-soft">Statistics</h2>
|
||
<dl className="mt-4 grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
|
||
<div className="rounded-lg bg-nova-900/30 px-3 py-2">
|
||
<dt className="text-soft">👁 Views</dt>
|
||
<dd className="mt-1 font-medium text-white">{formatCount(stats.views)} views</dd>
|
||
</div>
|
||
<div className="rounded-lg bg-nova-900/30 px-3 py-2">
|
||
<dt className="text-soft">⬇️ Downloads</dt>
|
||
<dd className="mt-1 font-medium text-white">{formatCount(stats.downloads)} downloads</dd>
|
||
</div>
|
||
<div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:block">
|
||
<dt className="text-soft">❤️ Likes</dt>
|
||
<dd className="mt-1 font-medium text-white">{formatCount(stats.likes)} likes</dd>
|
||
</div>
|
||
<div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:block">
|
||
<dt className="text-soft">⭐ Favorites</dt>
|
||
<dd className="mt-1 font-medium text-white">{formatCount(stats.favorites)} favorites</dd>
|
||
</div>
|
||
<div className="hidden rounded-lg bg-nova-900/30 px-3 py-2 sm:col-span-2 sm:block">
|
||
<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>
|
||
</dl>
|
||
</section>
|
||
)
|
||
}
|