var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, Show, Switch, Match } from \"solid-js\";\n\nfunction App() {\n  const [x] = createSignal(7);\n\n  return (\n    <Show\n      when={x() > 10}\n      fallback={\n        <Show\n          when={5 > x()}\n          fallback={<p>{x()} is between 5 and 10</p>}\n        >\n          <p>{x()} is less than 5</p>\n        </Show>\n      }\n    >\n      <p>{x()} is greater than 10</p>\n    </Show>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, Switch, Match } from \"solid-js\";\n\nfunction App() {\n  const [x] = createSignal(7);\n\n  return (\n    <Switch fallback={<p>{x()} is between 5 and 10</p>}>\n      <Match when={x() > 10} >\n        <p>{x()} is greater than 10</p>\n      </Match>\n      <Match when={5 > x()}>\n        <p>{x()} is less than 5</p>\n      </Match>\n    </Switch>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		}
	]
};
var markdown = "Sometimes you need to deal with conditionals with more than 2 mutual exclusive outcomes. For this case, we have the `<Switch>` and `<Match>` components modeled roughly after JavaScript's `switch`/`case`.\n\nIt will try in order to match each condition, stopping to render the first that evaluates to true. Failing all of them, it will render the the fallback.\n\nIn the example, we can replace our nested `<Show>` components with this:\n\n```jsx\n<Switch fallback={<p>{x()} is between 5 and 10</p>}>\n  <Match when={x() > 10}>\n    <p>{x()} is greater than 10</p>\n  </Match>\n  <Match when={5 > x()}>\n    <p>{x()} is less than 5</p>\n  </Match>\n</Switch>\n```\n";
var flow_switch = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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