<script lang="ts">
	import InstallPrompt from "@zedensix/ui/blocks/install-prompt";
	import { Button } from "@zedensix/ui/button";

	let open = $state(false);
</script>

<div class="grid justify-items-start gap-4">
	<p class="text-muted-foreground text-sm">
		On a phone it opens by itself once; bind <code>open</code> to show it again from
		a settings page. It picks the native prompt, the iOS Share steps or the browser
		menu steps.
	</p>
	<Button onclick={() => (open = true)}>Show the install sheet</Button>
</div>
<InstallPrompt appName="Acme" storageKey="acme-install-prompt" bind:open>
	{#snippet brand()}
		<div class="bg-primary glow size-14 rounded-2xl"></div>
	{/snippet}
</InstallPrompt>

<script lang="ts">
	import InstallPrompt from "@zedensix/ui/blocks/install-prompt";

	const { children } = $props();
</script>

{@render children()}
<InstallPrompt appName="Acme" storageKey="acme-install-prompt">
	{#snippet brand()}
		<img src="/icon-192.png" alt="" class="size-14 rounded-2xl" />
	{/snippet}
</InstallPrompt>