41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
// /src/app/components/UserHeader.tsx
|
|
import { Tabs } from '@/app/components/Tabs'
|
|
import PremierRankBadge from './PremierRankBadge'
|
|
|
|
type UserHeaderProps = {
|
|
steamId: string
|
|
name: string
|
|
avatar?: string | null
|
|
premierRank?: number | null
|
|
}
|
|
|
|
export default function UserHeader({ steamId, name, avatar, premierRank }: UserHeaderProps) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<img
|
|
src={avatar || '/default-avatar.png'}
|
|
alt={name ?? ''}
|
|
width={64}
|
|
height={64}
|
|
className="rounded-full"
|
|
/>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="text-2xl font-bold text-gray-800 dark:text-white">{name}</h1>
|
|
{typeof premierRank === 'number' && (
|
|
<PremierRankBadge rank={premierRank} />
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-500">{steamId}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs>
|
|
<Tabs.Tab name="Statistiken" href={`/profile/${steamId}/stats`} />
|
|
<Tabs.Tab name="Matches" href={`/profile/${steamId}/matches`} />
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|