add mlb page

src/app/(home)/major-league-balatro/_components/player-avatar.tsx

@@ -0,0 +1,30 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+interface PlayerAvatarProps {
+  playerName: string
+  img?: string
+  className?: string
+}
+
+export function PlayerAvatar({
+  playerName,
+  img,
+  className,
+}: PlayerAvatarProps) {
+  const initials = getInitials(playerName)
+  return (
+    <Avatar className={className}>
+      <AvatarImage src={img} alt={playerName} />
+      <AvatarFallback>{initials}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+function getInitials(name: string) {
+  if (!name || name === 'TBD') return '?'
+
+  const parts = name.split(' ')
+  if (parts.length === 1) return name.substring(0, 2).toUpperCase()
+  return (
+    (parts?.[0]?.[0] ?? '') + (parts[parts.length - 1]?.[0] ?? '')
+  ).toUpperCase()
+}