kickern/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
arnef
2026-09-08 09:20:13 +02:00
commit 1c14e4506b
34 changed files with 2036 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/components/SquadComparison.tsx
+66
View File
@@ -0,0 +1,66 @@
export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
const homeMembers = () => props.homeRosters || [];
const awayMembers = () => props.awayRosters || [];
return (
<div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 overflow-hidden">
<h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 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-emerald-400 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-emerald-500/20 p-0.5 bg-gray-900 mb-1">
<img
src={player.imageUrl || "/fallback-avatar.svg"}
class="size-full rounded-full object-cover"
alt=""
/>
</div>
<span class="text-[10px] text-gray-300 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-gray-400 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-gray-700 p-0.5 bg-gray-900 mb-1">
<img
src={player.imageUrl || "/fallback-avatar.svg"}
class="size-full rounded-full object-cover"
alt=""
/>
</div>
<span class="text-[10px] text-gray-300 font-medium truncate w-full">
{player.name.split(" ")[1] || player.name}
</span>
</div>
)}
</For>
</div>
</div>
</div>
</div>
);
}