70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import { For } from "solid-js";
|
|
import { Card } from "./Card";
|
|
|
|
export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
|
|
const homeMembers = () => props.homeRosters || [];
|
|
const awayMembers = () => props.awayRosters || [];
|
|
|
|
return (
|
|
<Card variant="section" class="p-4 space-y-4 overflow-hidden">
|
|
<h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
|
|
Kaderübersicht
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
{/* HEIM TEAM ROW */}
|
|
<div class="space-y-2">
|
|
<div class="text-[10px] uppercase font-bold text-accent px-1">
|
|
{props.homeTeam.name}
|
|
</div>
|
|
{/* Horizontale Scrollbar */}
|
|
<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x">
|
|
<For each={homeMembers()}>
|
|
{(player) => (
|
|
<div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
|
|
<div class="size-10 rounded-full border border-accent/20 p-0.5 bg-app mb-1">
|
|
<img
|
|
src={player.imageUrl || "/fallback-avatar.svg"}
|
|
class="size-full rounded-full object-cover"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<span class="text-[10px] text-ink font-medium truncate w-full">
|
|
{player.name}
|
|
{/* Nur Nachname spart Platz */}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AUSWÄRTS TEAM ROW */}
|
|
<div class="space-y-2">
|
|
<div class="text-[10px] uppercase font-bold text-ink-muted px-1">
|
|
{props.awayTeam.name}
|
|
</div>
|
|
<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x">
|
|
<For each={awayMembers()}>
|
|
{(player) => (
|
|
<div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
|
|
<div class="size-10 rounded-full border border-line p-0.5 bg-app mb-1">
|
|
<img
|
|
src={player.imageUrl || "/fallback-avatar.svg"}
|
|
class="size-full rounded-full object-cover"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<span class="text-[10px] text-ink font-medium truncate w-full">
|
|
{player.name.split(" ")[1] || player.name}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|