Berechnung Bedarfsausweis

src/components/ImageGrid.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import UploadImages from "./UploadImages.svelte";
+
+	export let images: (File & { data: string })[] = [];
+	export let max: number = 4;
+</script>
+
+<div class="flex flex-col gap-4">
+	<UploadImages {max} bind:images />
+	<div class="grid grid-cols-2 gap-2">
+		{#each images as image, i}
+			<div class="relative group">
+				<img
+					src={image.data}
+					alt={image.name}
+					class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
+				/>
+				<button
+					type="button"
+					class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full w-[30px] h-[30px] p-2 bg-[rgba(0,0,0,0.4)]"
+					on:click={() => {
+						delete images[i];
+						images = images.filter((x) => x);
+					}}
+				>
+					R
+				</button>
+			</div>
+		{/each}
+	</div>
+</div>