update

resources/js/components/leaderboard/LeaderboardTabs.jsx

@@ -0,0 +1,35 @@
+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>
+  )
+}