36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
|
|
function cx(...parts) {
|
|
return parts.filter(Boolean).join(' ')
|
|
}
|
|
|
|
export default function LeaderboardTabs({ items, active, onChange, sticky = false, label }) {
|
|
return (
|
|
<div className={cx(sticky ? 'sticky top-16 z-20' : '', 'rounded-2xl border border-white/10 bg-slate-950/85 p-2 backdrop-blur') }>
|
|
<div className="flex flex-wrap items-center gap-2" role="tablist" aria-label={label || 'Leaderboard tabs'}>
|
|
{items.map((item) => {
|
|
const isActive = item.value === active
|
|
|
|
return (
|
|
<button
|
|
key={item.value}
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={isActive}
|
|
onClick={() => onChange(item.value)}
|
|
className={cx(
|
|
'rounded-full px-4 py-2 text-sm font-semibold transition',
|
|
isActive
|
|
? 'bg-sky-400 text-slate-950 shadow-[0_12px_30px_rgba(56,189,248,0.28)]'
|
|
: 'bg-white/5 text-slate-300 hover:bg-white/10 hover:text-white',
|
|
)}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|