mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-06 17:46:23 +00:00
92 lines
3.0 KiB
TypeScript
Vendored
92 lines
3.0 KiB
TypeScript
Vendored
/*
|
|
Copyright (C) 2023-2026 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
import { useTranslation } from 'react-i18next'
|
|
import { cn } from '@/lib/utils'
|
|
import type { RankingPeriod } from '../types'
|
|
|
|
const PERIODS: { id: RankingPeriod; labelKey: string }[] = [
|
|
{ id: 'today', labelKey: 'Today' },
|
|
{ id: 'week', labelKey: 'Week' },
|
|
{ id: 'month', labelKey: 'Month' },
|
|
{ id: 'year', labelKey: 'Year' },
|
|
]
|
|
|
|
type RankingsHeroProps = {
|
|
period: RankingPeriod
|
|
onPeriodChange: (period: RankingPeriod) => void
|
|
}
|
|
|
|
/**
|
|
* Hero strip for the rankings page. Intentionally minimal — title +
|
|
* subtitle + period tabs only.
|
|
*/
|
|
export function RankingsHero(props: RankingsHeroProps) {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<section className='space-y-5'>
|
|
<div className='space-y-2'>
|
|
<h1 className='text-[clamp(1.75rem,4vw,2.5rem)] leading-[1.15] font-bold tracking-tight'>
|
|
{t('Rankings')}
|
|
</h1>
|
|
<p className='text-muted-foreground/80 max-w-2xl text-sm'>
|
|
{t(
|
|
'Discover the most-used models and rising vendors on the platform, updated from live usage data.'
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Underline tabs for period — clean and unobtrusive. */}
|
|
<div
|
|
role='tablist'
|
|
aria-label={t('Period')}
|
|
className='border-border/60 flex items-center border-b'
|
|
>
|
|
{PERIODS.map((p) => {
|
|
const isActive = props.period === p.id
|
|
return (
|
|
<button
|
|
key={p.id}
|
|
role='tab'
|
|
type='button'
|
|
aria-selected={isActive}
|
|
onClick={() => props.onPeriodChange(p.id)}
|
|
className={cn(
|
|
'focus-visible:ring-ring/40 relative -mb-px rounded-sm px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',
|
|
isActive
|
|
? 'text-foreground'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
)}
|
|
>
|
|
{t(p.labelKey)}
|
|
<span
|
|
aria-hidden
|
|
className={cn(
|
|
'bg-foreground absolute inset-x-3 -bottom-px h-[2px] rounded-full transition-opacity',
|
|
isActive ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
/>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|