import { type Component } from "dreamland/core";

export const Counter: Component<
	{},
	{
		counter: number;
	}
> = function () {
	this.counter = 0;

	return (
		<div>
			<h2>Counter!</h2>
			<button on:click={() => this.counter++}>
				{use(this.counter)} clicks
			</button>
		</div>
	);
};

import { css, type Component, type ComponentChild } from "dreamland/core";

const Button: Component<{
	children: ComponentChild;
}> = function (cx) {
	return <button on:click={() => alert()}>{cx.children}</button>;
};
Button.style = css`
	:scope {
		background: var(--accent);
		color: var(--bg-1);
		border: none;
		border-radius: 0.5rem;
	}
`;

export const StyledPage: Component = function () {
	return (
		<div>
			<Button>Click!</Button>
		</div>
	);
};