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

	import Input from "@zedensix/ui/components/input";
	import { Button } from "@zedensix/ui/button";
	import { saveToast } from "@zedensix/ui/toast";
</script>

<form
	method="POST"
	action="?/save"
	use:enhance={saveToast("Profile")}
	class="grid grid-cols-1 gap-4 sm:grid-cols-[1fr_auto] sm:items-end"
>
	<Input
		label="Name"
		name="name"
		value="Alex"
		description="Clear it to see the action's error."
	/>
	<Button type="submit" class="h-11">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;