adds dropzone to add zips

src/routes/+page.svelte

@@ -1,22 +1,35 @@
-<script>
+<script lang="ts">
     import Card from "$lib/components/Card.svelte";
+    import ZipDropzone from "$lib/components/ZipDropzone.svelte";
+
+    let selectedZipFiles: File[] = $state([]);
+
+    const handleFilesSelected = (files: File[]) => {
+        selectedZipFiles = [...selectedZipFiles, ...files];
+    };
 </script>
 
 {#snippet content()}
-    <div class="text-center justify-center flex grow flex-col min-h-[calc(-180px+100vh)]">
-        <div class="flex flex-row justify-center items-baseline gap-2">
-            <h1 class="h1 text-[20px] font-bold text-primary-900">Dateien hinzufügen</h1>
-            <span class="font-extrabold text-primary-900 text-[20px]">
-            +
-            </span>
+    {#if selectedZipFiles.length === 0}
+        <ZipDropzone onFilesSelected={handleFilesSelected} />
+    {:else}
+        <div class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6">
+            <div class="flex flex-row items-baseline justify-center gap-2">
+                <h2 class="h1 text-[20px] font-bold text-primary-900">ZIP-Dateien geladen</h2>
+            </div>
+
+            <ul class="mx-auto w-full max-w-3xl space-y-2">
+                {#each selectedZipFiles as file}
+                    <li class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
+                        {file.name}
+                    </li>
+                {/each}
+            </ul>
         </div>
-    </div>
+    {/if}
 {/snippet}
 
 <section class="px-4">
     <h1 class="h1 text-[20px] font-bold py-6 text-primary-900">beA-Edit</h1>
-    <Card {content} class="h-full cursor-pointer"/>
-    <!--    <Button variant="primary">-->
-    <!--        Neu berechnen-->
-    <!--    </Button>-->
+    <Card {content} class="h-full"/>
 </section>