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](https://ru.reactjs.org/docs/introducing-jsx.html) позволяет использовать JavaScript для управления логикой рендера напрямую в шаблонах. Однако без виртуального DOM наивное использование таких вещей, как `Array.prototype.map`, привело бы к бесполезному воссозданию всех узлов DOM при каждом обновлении. Вместо этого в реактивных библиотеках часто используются помощники для рендера шаблонов. В Solid мы оборачиваем их в компоненты.\n\nСамый простой пример логики рендера это - условие. Несмотря на то, что компилятор Solid достаточно умен, чтобы оптимально обрабатывать тернарный оператор (`a ? b : c`) и оператор `&&` (`a && b`) мы советуем использовать компонент <Show> встроенный в Solid.\n\nВ этом уроке мы хотели бы показать только одну кнопку, которая показывает вошел ли пользователь в систему. Давайте обновим наш JSX:\n\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\nПропс `fallback` выполняет функцию `else` и будет показан в том случае если условие, которое мы передали в `when` вернёт [falsy](https://developer.mozilla.org/ru/docs/Glossary/Falsy) значение.\n\nЕсли мы нажмем на кнопку, то увидим как состояние переключается между двумя значениями, как вы и ожидаете.";
var flow_show = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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