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는 `class`와 `className`를 사용해 엘리먼트의 `className` 프로퍼티를 설정할 수 있습니다. 하지만 조건문을 사용해 class를 설정하는 것이 편한 경우가 많습니다. 이러한 이유로, Solid는 키가 class 이름이고 값이 boolean 표현식인 객체를 받는 빌트인 `classList` JSX 속성을 제공합니다. 표현식이 true인 경우 class가 적용되며, false인 경우 삭제됩니다.\n\n예제에서 다음 코드를:\n\n```jsx\n<button\n  class={current() === 'foo' ? 'selected' : ''}\n  onClick={() => setCurrent('foo')}\n>foo</button>\n```\n\n다음과 같이 변경할 수 있습니다:\n\n```jsx\n<button\n  classList={{selected: current() === 'foo'}}\n  onClick={() => setCurrent('foo')}\n>foo</button>\n```\n\nCSS 모듈에서 받은 이름을 동적으로 적용할 수도 있습니다:\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 };
