72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { SiClaude, SiOpenai } from 'react-icons/si'
|
|
import { toolThemes, type ToolTheme, type ProviderId } from '@/app/ai/theme'
|
|
|
|
interface PageHeaderProps {
|
|
selectedProvider?: ProviderId
|
|
theme: ToolTheme
|
|
}
|
|
|
|
export default function PageHeader({ selectedProvider = 'all', theme }: PageHeaderProps) {
|
|
const iconSize = 60
|
|
|
|
const renderIcons = (): React.JSX.Element => {
|
|
if (selectedProvider === 'claudeCode') {
|
|
return <SiClaude size={iconSize} style={{ color: theme.accent }} />
|
|
} else if (selectedProvider === 'codex') {
|
|
return (
|
|
<SiOpenai
|
|
size={iconSize}
|
|
style={{ color: theme.accent }}
|
|
className="drop-shadow-[0_0_12px_rgba(255,255,255,0.25)]"
|
|
/>
|
|
)
|
|
} else {
|
|
return (
|
|
<div className="flex gap-4 justify-center">
|
|
<SiClaude size={iconSize} style={{ color: toolThemes.claudeCode.accent }} />
|
|
<SiOpenai
|
|
size={iconSize}
|
|
style={{ color: toolThemes.codex.accent }}
|
|
className="drop-shadow-[0_0_12px_rgba(255,255,255,0.25)]"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const getTitle = (): string => {
|
|
if (selectedProvider === 'claudeCode') return 'Claude Code Usage'
|
|
if (selectedProvider === 'codex') return 'Codex Usage'
|
|
return 'AI Usage'
|
|
}
|
|
|
|
const getSubtitle = (): string => {
|
|
if (selectedProvider === 'claudeCode') return 'Track my Claude Code usage'
|
|
if (selectedProvider === 'codex') return 'Track my Codex usage'
|
|
return 'Track my AI usage across providers'
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div className="container mx-auto px-4 relative">
|
|
<Link
|
|
href="/ai"
|
|
className="absolute top-5 left-2 text-gray-400 hover:text-gray-200 hover:underline transition-colors duration-200 px-2 py-1 text-sm sm:text-base z-10"
|
|
>
|
|
← Back to AI
|
|
</Link>
|
|
<div className="py-12 text-center">
|
|
<div className="flex justify-center mb-6">
|
|
{renderIcons()}
|
|
</div>
|
|
<h1 className="text-4xl font-bold mb-2 text-gray-100 glow">{getTitle()}</h1>
|
|
<p className="text-gray-400">{getSubtitle()}</p>
|
|
<div className="mx-auto mt-6 h-1 w-16 rounded-full" style={{ backgroundColor: theme.accent }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|