59 lines
1.6 KiB
Svelte
59 lines
1.6 KiB
Svelte
<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 | null;
|
|
status: 'none' | 'review' | 'reviewed';
|
|
reason: string;
|
|
body: string;
|
|
statement?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div>
|
|
<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} disabled={true} pickyWidth={false}>
|
|
{#snippet label()}
|
|
<span>Report Grund</span>
|
|
{/snippet}
|
|
</Input>
|
|
<Textarea disabled={true} rows={4} value={body} label="Report Details" />
|
|
</div>
|
|
<div class="divider divider-vertical mb-1"></div>
|
|
<Textarea disabled={true} rows={4} label="Admin Kommentar" value={statement} />
|
|
</div>
|