var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Show } from 'solid-js';\n\nfunction App() {\n  const [loggedIn, setLoggedIn] = createSignal(false);\n  const toggle = () => setLoggedIn(!loggedIn())\n  \n  return (\n    <>\n      <button onClick={toggle}>Log out</button>\n      <button onClick={toggle}>Log in</button>\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Show } from 'solid-js';\n\nfunction App() {\n  const [loggedIn, setLoggedIn] = createSignal(false);\n  const toggle = () => setLoggedIn(!loggedIn())\n  \n  return (\n    <Show\n      when={loggedIn()}\n      fallback={<button onClick={toggle}>Log in</button>}\n    >\n      <button onClick={toggle}>Log out</button>\n    </Show>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "JSX에서는 자바스크립트를 사용해 템플릿의 논리 흐름을 제어할 수 있습니다. 그러나, 가상 DOM이 없는 경우, `Array.prototype.map`를 아무 생각없이 사용하면 업데이트할 때마다 모든 DOM 노드를 새로 생성하고 버리게 될 수 있습니다. 리액티브 라이브러리에서는 대신 템플릿 헬퍼를 사용하는 것이 일반적입니다. Solid에서는 헬퍼를 컴포넌트로 래핑합니다.\n\n가장 기본적인 제어 흐름은 조건문입니다. Solid의 컴파일러는 똑똑하게도 삼항 연산자(`a ? b : c`)와 불 표현식(`a && b`)을 최적화해서 처리합니다. 하지만, Solid의 `<Show>` 컴포넌트를 사용하는 것이 가독성이 더 좋을 때도 있습니다.\n\n이 예에서는, 현재 상태(사용자가 로그인했는지 여부)를 반영하는 적절한 버튼만 표시하고자 합니다. JSX를 다음과 같이 업데이트하세요:\n```jsx\n<Show\n  when={loggedIn()}\n  fallback={() => <button onClick={toggle}>Log in</button>}\n>\n  <button onClick={toggle}>Log out</button>\n</Show>\n```\n`fallback` prop은 `else`처럼 동작하며, `when`에 넘겨진 조건이 `false`인 경우에만 표시됩니다.\n\n이제 버튼을 클릭하면 예상한 대로 버튼의 상태가 왔다 갔다하는 것을 볼 수 있습니다.\n";
var flow_show = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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