46 lines
1.1 KiB
Svelte
46 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { fly } from 'svelte/transition';
|
|
import ReportDraft from './ReportDraft.svelte';
|
|
import ReportSubmitted from './ReportSubmitted.svelte';
|
|
|
|
let { data } = $props();
|
|
|
|
let reason = $state(data.reason);
|
|
let body = $state(data.body);
|
|
let reporterName = $state(data.reporter.name);
|
|
let reportedName = $state(data.reported.name || null);
|
|
let completed = $state(!data.draft);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Report</title>
|
|
<!-- just in case... -->
|
|
<meta name="robots" content="noindex" />
|
|
</svelte:head>
|
|
|
|
<div class="mt-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
|
|
{#if !completed}
|
|
<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
|
|
<ReportDraft
|
|
bind:reason
|
|
bind:body
|
|
bind:reporterName
|
|
bind:reportedName
|
|
users={data.users ?? []}
|
|
onsubmit={() => (completed = true)}
|
|
/>
|
|
</div>
|
|
{:else}
|
|
<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
|
|
<ReportSubmitted
|
|
{reason}
|
|
{body}
|
|
{reporterName}
|
|
{reportedName}
|
|
status={data.status}
|
|
statement={data.statement}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
</div>
|