nexpr/lit-emotion.html

## lit-emotion.html
<!DOCTYPE html>
<meta charset="utf-8" />

<script>
	// for emotion
	window.process = { env: {} }
</script>
<script type="module">
	import { html, render } from "https://unpkg.com/lit-html@2.1.1/lit-html.js"
	import { css, cx } from "https://unpkg.com/@emotion/css@11.7.1/dist/emotion-css.esm.js?module"

	const values = {
		users: [
			{
				name: "user1",
				description: "description".repeat(5),
			},
			{
				name: "user2",
				description: "description".repeat(4),
			},
			{
				name: "user3",
				description: "description".repeat(7),
			},
		],
		direction: "row",
	}

	const userTemplate = (user) => html`
		<section class=${css`
			border: 1px solid silver;
			&:hover {
				background: #f0f0f0;
			}
			& h1 {
				font-size: 18px;
			}
			& p {
				font-size: 12px;
				color: #666";
			}
		`}>
			<h1>${user.name}</h1>
			<p>${user.description}</p>
		</section>
	`

	const radioTemplate = (items, name, selected, onchange) => items.map(item => html`
		<label>
			<input
				type="radio"
				name=${name}
				?checked=${selected === item}
				@change=${() => onchange(item)}
			>
			${item}
		</label>
	`)

	const template = () => html`
		<div>
			<div>
				${radioTemplate(
					["row", "column"],
					"direction",
					values.direction,
					update(selected => values.direction = selected)
				)}
			</div>
			<div class=${css`
				display:flex;
				flex-direction: ${values.direction};
				gap:10px;
				align-items: flex-start;
			`}>
				${values.users.map(user => userTemplate(user))}
			</div>
		</div>
	`

	const update = (fn) => (...a) => {
		fn && fn(...a)
		render(template(), root)
	}

	update()()
</script>

<div id="root"></div>
	<!DOCTYPE html>
	<meta charset="utf-8" />

	<script>
	// for emotion
	window.process = { env: {} }
	</script>
	<script type="module">
	import { html, render } from "https://unpkg.com/lit-html@2.1.1/lit-html.js"
	import { css, cx } from "https://unpkg.com/@emotion/css@11.7.1/dist/emotion-css.esm.js?module"

	const values = {
	users: [
	{
	name: "user1",
	description: "description".repeat(5),
	},
	{
	name: "user2",
	description: "description".repeat(4),
	},
	{
	name: "user3",
	description: "description".repeat(7),
	},
	],
	direction: "row",
	}

	const userTemplate = (user) => html`
	<section class=${css`
	border: 1px solid silver;
	&:hover {
	background: #f0f0f0;
	}
	& h1 {
	font-size: 18px;
	}
	& p {
	font-size: 12px;
	color: #666";
	}
	`}>
	<h1>${user.name}</h1>
	<p>${user.description}</p>
	</section>
	`

	const radioTemplate = (items, name, selected, onchange) => items.map(item => html`
	<label>
	<input
	type="radio"
	name=${name}
	?checked=${selected === item}
	@change=${() => onchange(item)}
	>
	${item}
	</label>
	`)

	const template = () => html`
	<div>
	<div>
	${radioTemplate(
	["row", "column"],
	"direction",
	values.direction,
	update(selected => values.direction = selected)
	)}
	</div>
	<div class=${css`
	display:flex;
	flex-direction: ${values.direction};
	gap:10px;
	align-items: flex-start;
	`}>
	${values.users.map(user => userTemplate(user))}
	</div>
	</div>
	`

	const update = (fn) => (...a) => {
	fn && fn(...a)
	render(template(), root)
	}

	update()()
	</script>

	<div id="root"></div>