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 allows you to use JavaScript to control the logic flow in the templates. However, without a Virtual DOM, naive use of things like `Array.prototype.map` would wastefully recreate all the DOM nodes on every update. Instead it is common for Reactive libraries to use template helpers. In Solid we wrap them in components.\n\nThe most basic control flow is the conditional. Solid's compiler is smart enough to optimally handle ternaries (`a ? b : c`) and boolean expressions (`a && b`). However, often it is more readable to use Solid's `<Show>` component.\n\nIn the example, we would like to show only the appropriate button that reflects the current state (whether the user is logged in). Update the JSX to:\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```\nThe `fallback` prop acts as the `else` and will show when the condition passed to `when` is not truthy.\n\nNow clicking the button will change back and forth like you would expect.\n";
var flow_show = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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