78 lines
3.2 KiB
JavaScript
78 lines
3.2 KiB
JavaScript
import React, { useEffect, useRef } from 'react'
|
|
|
|
export const TABS = [
|
|
{ id: 'posts', label: 'Posts', icon: 'fa-newspaper' },
|
|
{ id: 'artworks', label: 'Artworks', icon: 'fa-images' },
|
|
{ id: 'stories', label: 'Stories', icon: 'fa-feather-pointed' },
|
|
{ id: 'achievements', label: 'Achievements', icon: 'fa-trophy' },
|
|
{ id: 'collections', label: 'Collections', icon: 'fa-layer-group' },
|
|
{ id: 'about', label: 'About', icon: 'fa-id-card' },
|
|
{ id: 'stats', label: 'Stats', icon: 'fa-chart-bar' },
|
|
{ id: 'favourites', label: 'Favourites', icon: 'fa-heart' },
|
|
{ id: 'activity', label: 'Activity', icon: 'fa-bolt' },
|
|
]
|
|
|
|
/**
|
|
* ProfileTabs
|
|
* Sticky tab navigation that:
|
|
* - Scrolls horizontally on mobile
|
|
* - Shows active underline / glow
|
|
* - Updates URL query param on tab change
|
|
*/
|
|
export default function ProfileTabs({ activeTab, onTabChange }) {
|
|
const navRef = useRef(null)
|
|
const activeRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (activeRef.current && navRef.current) {
|
|
activeRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
|
|
}
|
|
}, [activeTab])
|
|
|
|
return (
|
|
<div className="sticky top-0 z-30 border-b border-white/10 bg-[#08111f]/80 backdrop-blur-2xl">
|
|
<nav
|
|
ref={navRef}
|
|
className="profile-tabs-sticky overflow-x-auto scrollbar-hide"
|
|
aria-label="Profile sections"
|
|
role="tablist"
|
|
>
|
|
<div className="mx-auto flex w-max min-w-full gap-2 px-3 py-3 justify-center xl:items-stretch">
|
|
{TABS.map((tab) => {
|
|
const isActive = activeTab === tab.id
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
ref={isActive ? activeRef : null}
|
|
onClick={() => onTabChange(tab.id)}
|
|
role="tab"
|
|
aria-selected={isActive}
|
|
aria-controls={`tabpanel-${tab.id}`}
|
|
className={`
|
|
group relative flex items-center gap-2.5 rounded-2xl border px-3.5 py-3 text-sm font-medium whitespace-nowrap
|
|
outline-none transition-all duration-150 focus-visible:ring-2 focus-visible:ring-sky-400/70
|
|
${isActive
|
|
? 'border-sky-300/25 bg-gradient-to-br from-sky-400/18 via-white/[0.06] to-cyan-400/10 text-white shadow-[0_16px_32px_rgba(14,165,233,0.12)]'
|
|
: 'border-white/8 bg-white/[0.03] text-slate-400 hover:border-white/15 hover:bg-white/[0.05] hover:text-slate-100'
|
|
}
|
|
`}
|
|
>
|
|
<span className={`inline-flex h-9 w-9 items-center justify-center rounded-xl border text-sm ${isActive ? 'border-sky-300/20 bg-sky-400/10 text-sky-200' : 'border-white/10 bg-white/[0.04] text-slate-500 group-hover:text-slate-300'}`}>
|
|
<i className={`fa-solid ${tab.icon} fa-fw`} />
|
|
</span>
|
|
{tab.label}
|
|
{isActive && (
|
|
<span
|
|
className="absolute inset-x-4 bottom-0 h-0.5 rounded-full bg-sky-300 shadow-[0_0_10px_rgba(125,211,252,0.8)]"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|