guter zwischenstand

webpage/src/components/FileListItem.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import type { BuzzerFile } from "../lib/types";
+    import { FileAudioIcon } from "phosphor-svelte";
+    export let file: BuzzerFile;
+</script>
+<div>
+  <button
+    class="w-full text-left flex-1 px-3 py-1 flex items-center cursor-pointer border-l-4 transition-colors border-b border-b-border-card
+           {file.selected ? 'border-l-blue-600 bg-blue-50 hover:bg-blue-100' : 'border-l-transparent hover:bg-slate-100 hover:border-l-blue-200'} "
+           on:click={() => {file.selected = !file.selected;}}
+           >
+    <FileAudioIcon class="text-blue-600 mr-3 w-5 h-5" />
+     <div class="flex flex-col">
+      <span class="font-light">
+        {file.name || "Unbekannte Datei"}
+        {#if file.metaTags?.t}
+          &thinsp;-&thinsp;
+          <span class="font-medium">{file.metaTags.t}</span>
+        {/if}
+      </span>
+      <div class="text-xs">
+        <span class="font-light text-text-muted text-xs">
+            {parseFloat((file.size/1024).toFixed(1))}&thinsp;kB
+        </span>
+        <span>
+            {#if file.metaTags.a}<span class="text-text-muted"> | Author:</span>&thinsp;{file.metaTags.a}{/if}
+        </span>
+      </div>
+    </div>
+  </button>
+</div>
+
+<style>
+
+</style>