update report submitted window (#42)

src/routes/report/[...url_hash]/ReportSubmitted.svelte

@@ -1,6 +1,58 @@
+<script lang="ts">
+	import Input from '$lib/components/Input/Input.svelte';
+	import Textarea from '$lib/components/Input/Textarea.svelte';
+
+	let {
+		reporterName,
+		reportedName,
+		status,
+		reason,
+		body,
+		statement
+	}: {
+		reporterName: string;
+		reportedName?: string;
+		status: 'none' | 'review' | 'reviewed';
+		reason: string;
+		body: string;
+		statement?: string;
+	} = $props();
+</script>
+
 <div>
-	<h2 class="text-2xl text-center">Report abgeschickt</h2>
-	<p class="mt-4">
-		Dein Report wurde abgeschickt und wird so schnell wie möglich von einem Admin bearbeitet.
-	</p>
+	<h2 class="text-3xl text-center">
+		Report von <span class="underline">{reporterName}</span> gegen
+		<span class="underline">{reportedName ?? 'unbekannt'}</span>
+	</h2>
+	<h4 class="text-xl text-center mt-1 mb-0">
+		{#if status === 'none'}
+			<span>Unbearbeitet</span>
+		{:else if status === 'review'}
+			<span>In Bearbeitung</span>
+		{:else if status === 'reviewed'}
+			<span>Bearbeitet</span>
+		{/if}
+		<span class="relative inline-flex h-3 w-3 ml-[1px]">
+			{#if status === 'review'}
+				<span
+					class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-500 opacity-75"
+				></span>
+			{/if}
+			<span
+				class="relative inline-flex rounded-full h-3 w-3"
+				class:bg-yellow-500={status === 'none' || status === 'review'}
+				class:bg-green-500={status === 'reviewed'}
+			></span>
+		</span>
+	</h4>
+	<div class="my-4">
+		<Input type="text" size="sm" value={reason} readonly={true} pickyWidth={false}>
+			{#snippet label()}
+				<span>Report Grund</span>
+			{/snippet}
+		</Input>
+		<Textarea readonly={true} rows={4} value={body} label="Report Details" />
+	</div>
+	<div class="divider divider-vertical mb-1"></div>
+	<Textarea readonly={true} rows={4} label="Admin Kommentar" value={statement} />
 </div>