add public feedback/contact option

src/routes/feedback/+page.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import Input from '$lib/components/Input/Input.svelte';
+	import Textarea from '$lib/components/Input/Textarea.svelte';
+	import { env } from '$env/dynamic/public';
+	import Select from '$lib/components/Input/Select.svelte';
+
+	let content = '';
+	let type = 'feedback';
+
+	let submitModal: HTMLDialogElement;
+	let sentModal: HTMLDialogElement & { type?: string } = {};
+
+	async function submitFeedback() {
+		await fetch(`${env.PUBLIC_BASE_PATH}/feedback`, {
+			method: 'POST',
+			body: JSON.stringify({
+				content: content,
+				type: type
+			})
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>Feedback & Kontakt</title>
+</svelte:head>
+
+<div>
+	<h2 class="text-3xl text-center">Feedback & Kontakt</h2>
+	<form on:submit|preventDefault={() => submitModal.show()}>
+		<div class="space-y-4 mt-6 mb-4">
+			<Select size="sm" bind:value={type}>
+				<option value="feedback">Feedback</option>
+				<option value="contact">Kontakt</option>
+			</Select>
+			<Textarea
+				required={true}
+				rows={4}
+				label={type === 'feedback' ? 'Feedback' : 'Anfrage'}
+				bind:value={content}
+			/>
+			<div>
+				<Input type="submit" disabled={type === '' || content === ''} value="Senden" />
+			</div>
+		</div>
+	</form>
+</div>
+
+<dialog class="modal" bind:this={submitModal}>
+	<form method="dialog" class="modal-box">
+		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		<div>
+			<h3 class="font-roboto font-medium text-xl">
+				{type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abschicken?
+			</h3>
+			<div class="my-4">
+				{#if type === 'feedback'}
+					<p>Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.</p>
+				{:else}
+					<p>
+						Bitte hinterlege eine Rückmeldemöglichkeit in deiner Anfrage. Nachdem sie abgeschickt
+						wurde, kannst du die Nachricht nicht mehr bearbeiten.
+					</p>
+				{/if}
+			</div>
+			<div class="flex flex-row space-x-1">
+				<Input
+					type="submit"
+					value="Abschicken"
+					on:click={async () => {
+						await submitFeedback();
+						sentModal.type = type;
+						sentModal.show();
+					}}
+				/>
+				<Input type="submit" value="Abbrechen" />
+			</div>
+		</div>
+	</form>
+	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+		<button>close</button>
+	</form>
+</dialog>
+
+<dialog class="modal" bind:this={sentModal}>
+	<form
+		method="dialog"
+		class="modal-box"
+		on:submit={() => {
+			content = '';
+			type = 'feedback';
+		}}
+	>
+		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		<div>
+			<h3 class="font-roboto font-medium text-xl">
+				{sentModal.type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abgeschickt
+			</h3>
+			<div class="my-4">
+				{#if type === 'feedback'}
+					<p>Dein Feedback wurde abgeschickt.</p>
+				{:else}
+					<p>
+						Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei
+						Dir melden.
+					</p>
+				{/if}
+			</div>
+			<Input type="submit" value="Schließen" />
+		</div>
+	</form>
+	<form
+		method="dialog"
+		class="modal-backdrop bg-[rgba(0,0,0,.3)]"
+		on:submit={() => {
+			content = '';
+			type = 'feedback';
+		}}
+	>
+		<button>close</button>
+	</form>
+</dialog>