82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
'use client'
|
||
|
||
import Image from 'next/image'
|
||
import { Player, Team } from '@/app/types/team'
|
||
|
||
export type CardWidth =
|
||
| 'sm' // max-w-sm (24rem)
|
||
| 'md' // max-w-md (28rem)
|
||
| 'lg' // max-w-lg (32rem)
|
||
| 'xl' // max-w-xl (36rem)
|
||
| '2xl' // max-w-2xl (42rem)
|
||
| 'full' // w-full
|
||
| 'auto' // keine Begrenzung
|
||
|
||
type Props = {
|
||
player: Player
|
||
team?: Team // aktuell nicht genutzt, aber falls du später z. B. Team‑Farbe brauchst
|
||
align?: 'left' | 'right'
|
||
maxWidth?: CardWidth
|
||
}
|
||
|
||
export default function PlayerCard({
|
||
player,
|
||
team,
|
||
align = 'left',
|
||
maxWidth = 'sm',
|
||
}: Props) {
|
||
/* --- Hilfs‑Klassen ----------------------------------------------------- */
|
||
|
||
const widthClasses: Record<CardWidth, string> = {
|
||
sm: 'max-w-sm',
|
||
md: 'max-w-md',
|
||
lg: 'max-w-lg',
|
||
xl: 'max-w-xl',
|
||
'2xl':'max-w-2xl',
|
||
full: 'w-full',
|
||
auto: '', // keine Begrenzung
|
||
}
|
||
|
||
// Linksbündig = Karte nach links schieben, Rechtsbündig = nach rechts
|
||
const alignClasses =
|
||
align === 'right'
|
||
? 'ml-auto'
|
||
: align === 'left'
|
||
? 'mr-auto'
|
||
: 'mx-auto'
|
||
|
||
// Für den Flex‑Container innen:
|
||
// * links: Avatar – Name (row)
|
||
// * rechts: Name – Avatar (row‑reverse)
|
||
const rowDir = align === 'right' ? 'flex-row-reverse text-right' : ''
|
||
|
||
const avatarSrc = player.avatar || '/default-avatar.png'
|
||
|
||
/* --- Rendering --------------------------------------------------------- */
|
||
|
||
return (
|
||
<div
|
||
className={`
|
||
flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl
|
||
dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70
|
||
${alignClasses} ${widthClasses[maxWidth]}
|
||
`}
|
||
>
|
||
<div className="p-2 md:p-4">
|
||
<div className={`flex items-center gap-3 ${rowDir}`}>
|
||
<Image
|
||
src={avatarSrc}
|
||
alt={player.name}
|
||
width={48}
|
||
height={48}
|
||
className="rounded-full shrink-0 border object-cover"
|
||
/>
|
||
<span className="whitespace-nowrap overflow-hidden text-ellipsis">
|
||
{player.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|