58 lines
2.6 KiB
JavaScript
58 lines
2.6 KiB
JavaScript
import React from 'react'
|
|
|
|
const PILLS = [
|
|
{ key: 'uploads_count', label: 'Artworks', icon: 'fa-images', tab: 'artworks' },
|
|
{ key: 'downloads_received_count', label: 'Downloads', icon: 'fa-download', tab: null },
|
|
{ key: 'follower_count', label: 'Followers', icon: 'fa-users', tab: 'about' },
|
|
{ key: 'following_count', label: 'Following', icon: 'fa-user-check', tab: 'about' },
|
|
{ key: 'artwork_views_received_count', label: 'Views', icon: 'fa-eye', tab: 'stats' },
|
|
{ key: 'awards_received_count', label: 'Awards', icon: 'fa-trophy', tab: 'stats' },
|
|
]
|
|
|
|
/**
|
|
* ProfileStatsRow
|
|
* Horizontal scrollable pill row of stat counts.
|
|
* Clicking a pill navigates to the relevant tab.
|
|
*/
|
|
export default function ProfileStatsRow({ stats, followerCount, onTabChange }) {
|
|
const values = {
|
|
uploads_count: stats?.uploads_count ?? 0,
|
|
downloads_received_count: stats?.downloads_received_count ?? 0,
|
|
follower_count: followerCount ?? 0,
|
|
following_count: stats?.following_count ?? 0,
|
|
artwork_views_received_count: stats?.artwork_views_received_count ?? 0,
|
|
awards_received_count: stats?.awards_received_count ?? 0,
|
|
}
|
|
|
|
return (
|
|
<div className="border-b border-white/10" style={{ background: 'rgba(255,255,255,0.02)' }}>
|
|
<div className="max-w-6xl mx-auto px-4">
|
|
<div className="grid grid-cols-3 md:grid-cols-6 gap-2 py-3">
|
|
{PILLS.map((pill) => (
|
|
<button
|
|
key={pill.key}
|
|
onClick={() => pill.tab && onTabChange(pill.tab)}
|
|
title={pill.label}
|
|
disabled={!pill.tab}
|
|
className={`
|
|
flex flex-col items-center justify-center gap-1 px-2 py-3 rounded-xl text-sm transition-all text-center
|
|
border border-white/10 bg-white/[0.02]
|
|
${pill.tab
|
|
? 'cursor-pointer hover:bg-white/[0.06] hover:border-white/20 hover:text-white text-slate-300 group'
|
|
: 'cursor-default text-slate-400 opacity-90'
|
|
}
|
|
`}
|
|
>
|
|
<i className={`fa-solid ${pill.icon} fa-fw text-xs ${pill.tab ? 'opacity-70 group-hover:opacity-100' : 'opacity-60'}`} />
|
|
<span className="font-bold text-white tabular-nums text-base leading-none">
|
|
{Number(values[pill.key]).toLocaleString()}
|
|
</span>
|
|
<span className="text-slate-500 text-[11px] uppercase tracking-wide leading-none">{pill.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|