<script lang="ts">
	import { goto } from "$app/navigation";
	import { getAuth } from "$lib/auth.svelte";
	import StringForm from "$lib/components/strings/StringForm.svelte";

	const auth = getAuth();
	const user = $derived(auth.currentUser);

	const handleSaved = async (rkey: string) => {
		await goto(`/strings/${user?.handle}/${rkey}`);
	};
</script>

<svelte:head>
	<title>New string &middot; Tangled</title>
</svelte:head>

<div class="mx-auto w-full max-w-screen-lg px-4 py-12">
	<div class="p-2">
		<h1 class="typography-heading-4 font-bold text-foreground-default">Create a new string</h1>
		<p class="typography-paragraph-small text-foreground-subtle">Store and share code snippets with ease.</p>
	</div>

	<div class="mt-4">
		<StringForm mode="create" onsaved={handleSaved} />
	</div>
</div>
