<script lang="ts">
	import { usePageTitle } from "@orochibraru/ui/page-title";

	const title = usePageTitle();
</script>

<p class="text-muted-foreground text-sm">
	This page set its title to <strong>{title.current}</strong> and its back
	button to <code>{title.backHref}</code>. The phone app bar, the desktop header
	and the browser tab all read it.
</p>

<script lang="ts">
	import { providePageTitle } from "@orochibraru/ui/page-title";

	const { children } = $props();

	providePageTitle();
</script>

{@render children()}

<script lang="ts">
	import PencilIcon from "@lucide/svelte/icons/pencil";
	import PlusIcon from "@lucide/svelte/icons/plus";

	import { setPageTitle } from "@orochibraru/ui/page-title";

	const { data } = $props();

	setPageTitle(() => data.project.name, "/projects", [
		{
			label: "New task",
			icon: PlusIcon,
			href: "/tasks/new",
			primary: true,
		},
		{ label: "Edit project", icon: PencilIcon, href: "/projects/edit" },
	]);
</script>

<script lang="ts">
	import { usePageTitle } from "@orochibraru/ui/page-title";

	const title = usePageTitle();
</script>

<header class="flex h-14 items-center gap-2 px-4">
	{#if title.backHref}
		<a href={title.backHref}>Back</a>
	{/if}
	<h1 class="truncate font-semibold">{title.current}</h1>
</header>