import React, { useEffect, useState } from 'react' import { Head, usePage } from '@inertiajs/react' import LeaderboardTabs from '../../components/leaderboard/LeaderboardTabs' import LeaderboardList from '../../components/leaderboard/LeaderboardList' const TYPE_TABS = [ { value: 'creator', label: 'Creators' }, { value: 'artwork', label: 'Artworks' }, { value: 'story', label: 'Stories' }, ] const PERIOD_TABS = [ { value: 'daily', label: 'Daily' }, { value: 'weekly', label: 'Weekly' }, { value: 'monthly', label: 'Monthly' }, { value: 'all_time', label: 'All-time' }, ] const API_BY_TYPE = { creator: '/api/leaderboard/creators', artwork: '/api/leaderboard/artworks', story: '/api/leaderboard/stories', } export default function LeaderboardPage() { const { props } = usePage() const { initialType = 'creator', initialPeriod = 'weekly', initialData = { items: [] }, meta = {} } = props const [type, setType] = useState(initialType) const [period, setPeriod] = useState(initialPeriod) const [data, setData] = useState(initialData) const [loading, setLoading] = useState(false) useEffect(() => { if (type === initialType && period === initialPeriod) { return } let cancelled = false async function load() { setLoading(true) try { const response = await window.axios.get(`${API_BY_TYPE[type]}?period=${period}`) if (!cancelled && response.data) { setData(response.data) } } finally { if (!cancelled) { setLoading(false) } } } load() try { const url = new URL(window.location.href) url.searchParams.set('type', type === 'creator' ? 'creators' : `${type}s`) url.searchParams.set('period', period === 'all_time' ? 'all' : period) window.history.replaceState({}, '', url.toString()) } catch (_) {} return () => { cancelled = true } }, [type, period, initialType, initialPeriod]) const items = Array.isArray(data?.items) ? data.items : [] return ( <> {meta?.title || 'Leaderboard | Skinbase'}

Skinbase Competition Board

Top creators, standout artworks, and stories with momentum.

Switch between creators, artworks, and stories, then filter by daily, weekly, monthly, or all-time performance.

{loading ? (
Refreshing leaderboard...
) : null}
) }