<script>
	import { useHover } from 'nutzlich';

	const [isHovered, hoverRef] = useHover();
</script>

<div use:hoverRef>
	{$isHovered ? 'Hovered' : 'Not hovered'}
</div>

<script>
	import { windowSize } from 'nutzlich';

	const { width, height } = windowSize();
</script>

<b>Width</b>
{$width}
<b>Height</b>
{$height}

<script>
	import { title } from 'nutzlich';

	const titleStore = title();
</script>

<label>Update title</label>
<input type="text" bind:value={$titleStore} />

<script>
	import { network } from 'nutzlich';

	const networkStore = network();
</script>

<span>
	Since {$networkStore.since.toLocaleString()}
	{$networkStore.state}
</span>

<script>
	import { mediaQuery } from 'nutzlich';

	const isLarge = mediaQuery('(min-width: 1024px)');
	const isPortrait = mediaQuery('(orientation: portrait)');
</script>

<span>
	Is large: {$isLarge} <br />
	Is Portrait: {$isPortrait}
</span>