move components

src/app/website/index/Teams.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import Steve from '@assets/img/steve.png';
+  import type { GetDeathsRes } from '@db/schema/death.ts';
+  import { type ActionReturnType, actions } from 'astro:actions';
+
+  interface Props {
+    teams: Exclude<ActionReturnType<typeof actions.team.teams>['data'], undefined>['teams'];
+    deaths: GetDeathsRes;
+  }
+
+  const { teams, deaths }: Props = $props();
+</script>
+
+<div class="card bg-base-300 shadow-sm w-full md:w-5/7 xl:w-4/7 sm:p-5 md:p-10">
+  <table class="table table-fixed">
+    <thead>
+      <tr>
+        <th>Team</th>
+        <th>Spieler 1</th>
+        <th>Spieler 2</th>
+        <th>Kills</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each teams as team (team.id)}
+        <tr>
+          <td>
+            <div class="flex items-center gap-x-2">
+              <div class="rounded-sm w-3 h-3" style="background-color: {team.color}"></div>
+              <h3 class="text-xs sm:text-xl">{team.name}</h3>
+            </div>
+          </td>
+          <td class="max-w-9 overflow-ellipsis">
+            {#if team.memberOne.id}
+              <div class="flex items-center gap-x-2">
+                <img class="w-4 h-4 pixelated" src={Steve.src} alt="head" />
+                <span
+                  class="text-xs sm:text-md"
+                  class:line-through={deaths.find((d) => d.deadUserId === team.memberOne.id)}
+                  >{team.memberOne.username}</span
+                >
+              </div>
+            {/if}
+          </td>
+          <td>
+            {#if team.memberTwo.id}
+              <div class="flex items-center gap-x-2">
+                <img class="w-4 h-4 pixelated" src={Steve.src} alt="head" />
+                <span
+                  class="text-xs sm:text-md"
+                  class:line-through={deaths.find((d) => d.deadUserId === team.memberTwo.id)}
+                  >{team.memberTwo.username}</span
+                >
+              </div>
+            {/if}
+          </td>
+          <td>
+            <span class="text-xs sm:text-md">0</span>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>