---
import Counter from '../components/Counter.jsx';
import PreactCompatComponent from '../components/JSXComponent.jsx';

const someProps = {
	count: 0,
};
---

<html>
	<head>
		<!-- Head Stuff -->
	</head>
	<body>
		<Counter id="server-only" {...someProps}>
			<h1>Hello, server!</h1>
		</Counter>

		<Counter id="client-idle" {...someProps} client:idle>
			<h1>Hello, client:idle!</h1>
		</Counter>

		<Counter id="client-load" {...someProps} client:load>
			<h1>Hello, client:load!</h1>
		</Counter>

		<Counter id="client-visible" {...someProps} client:visible>
			<h1>Hello, client:visible!</h1>
		</Counter>

		<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
			<h1>Hello, client:media!</h1>
		</Counter>

		<PreactCompatComponent id="client-only" client:only="preact" />
	</body>
</html>
