<script lang="ts">
	import { enhance } from "$app/forms";

	import { Button } from "@orochibraru/ui/button";
	import * as Field from "@orochibraru/ui/field";
	import { Input } from "@orochibraru/ui/input";
	import { saveToast } from "@orochibraru/ui/toast";
</script>

<form
	method="POST"
	action="?/save"
	use:enhance={saveToast("Profile")}
	class="grid gap-4 sm:grid-cols-[1fr_auto] sm:items-end"
>
	<Field.Field>
		<Field.Label for="toast-name">Name</Field.Label>
		<Input id="toast-name" name="name" value="Alex" />
		<Field.Description>Clear it to see the action's error.</Field.Description>
	</Field.Field>
	<Button type="submit">Save</Button>
</form>

import { type Actions, fail } from "@sveltejs/kit";

export const actions = {
	save: async ({ request }) => {
		const form = await request.formData();
		if (!String(form.get("name") ?? "").trim()) {
			return fail(400, { error: "Name is required." });
		}
		return { saved: true };
	},
} satisfies Actions;