var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nimport \"./style.css\";\n\nfunction App() {\n  const [current, setCurrent] = createSignal(\"foo\");\n\n  return <>\n    <button\n     class={current() === 'foo' ? 'selected' : ''}\n     onClick={() => setCurrent('foo')}\n    >foo</button>\n    <button\n      class={current() === 'bar' ? 'selected' : ''}\n      onClick={() => setCurrent('bar')}\n    >bar</button>\n    <button\n      class={current() === 'baz' ? 'selected' : ''}\n      onClick={() => setCurrent('baz')}\n    >baz</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "style",
			type: "css",
			content: "button {\n  display: block;\n}\n\n.selected {\n  background-color: #ff3e00;\n  color: white;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nimport \"./style.css\";\n\nfunction App() {\n  const [current, setCurrent] = createSignal(\"foo\");\n\n  return <>\n    <button\n     classList={{selected: current() === 'foo'}}\n     onClick={() => setCurrent('foo')}\n    >foo</button>\n    <button\n      classList={{selected: current() === 'bar'}}\n      onClick={() => setCurrent('bar')}\n    >bar</button>\n    <button\n      classList={{selected: current() === 'baz'}}\n      onClick={() => setCurrent('baz')}\n    >baz</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "style",
			type: "css",
			content: "button {\n  display: block;\n}\n\n.selected {\n  background-color: #ff3e00;\n  color: white;\n}"
		}
	]
};
var markdown = "Solid unterstützt sowohl `class` als auch `className`, um die `className`-Eigenschaft eines Elements zu setzen. Allerdings ist es häufig bequemer, bestimmte Klassen fallweise zu setzen. Aus diesem Grund hat Solid ein eingebautes `classList`-JSX-Attribut, das ein Objekt entgegen nimmt, in dem unter den Klassennamen ein Boolean gespeichert ist. Wenn der Boolean wahr ist, wird die Klasse gesetzt, ansonsten entfernt.\n\nIn diesem Beispiel können wir folgendes ersetzen:\n\n```jsx\n<button\n  class={current() === 'foo' ? 'selected' : ''}\n  onClick={() => setCurrent('foo')}\n>foo</button>\n```\n\nmit:\n\n```jsx\n<button\n  classList={{selected: current() === 'foo'}}\n  onClick={() => setCurrent('foo')}\n>foo</button>\n```\n\nHinweis: Klassennamen kann man auch dynamisch setzen, etwa aus CSS-Modulen:\n\n```jsx\nimport { active } from \"./style.module.css\"\n\n<div classList={{ [active]: isActive() }} />\n```\n";
var bindings_classlist = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { bindings_classlist as default, lesson, markdown, solved };
