var lesson = {
	files: [
		{
			name: "main",
			content: "import { render, Portal } from \"solid-js/web\";\nimport \"./styles.css\";\n\nfunction App() {\n  return (\n    <div class=\"app-container\">\n      <p>Just some text inside a div that has a restricted size.</p>\n      <div class=\"popup\">\n        <h1>Popup</h1>\n        <p>Some text you might need for something or other.</p>\n      </div>\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "styles",
			type: "css",
			content: ".app-container {\n  width: 200px;\n  height: 100px;\n  overflow: hidden;\n}\n\n.popup {\n  position: relative;\n  z-index: 2;\n  background: #ddd;\n  padding: 1rem;\n  min-height: 200px;\n  min-width: 200px;\n}\n\n.popup::after {\n  content: \" \";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent #ddd transparent;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render, Portal } from \"solid-js/web\";\nimport \"./styles.css\";\n\nfunction App() {\n  return (\n    <div class=\"app-container\">\n      <p>Just some text inside a div that has a restricted size.</p>\n      <Portal>\n        <div class=\"popup\">\n          <h1>Popup</h1>\n          <p>Some text you might need for something or other.</p>\n        </div>\n      </Portal>\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "styles",
			type: "css",
			content: ".app-container {\n  width: 200px;\n  height: 100px;\n  overflow: hidden;\n}\n\n.popup {\n  position: relative;\n  z-index: 2;\n  background: #ddd;\n  padding: 1rem;\n  min-height: 200px;\n  min-width: 200px;\n}\n\n.popup::after {\n  content: \" \";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent #ddd transparent;\n}"
		}
	]
};
var markdown = "Manchmal ist es sinnvoll, Elemente außerhalb des normalen Layouts der App einzufügen. Z-Index reicht gelegentlich nicht aus, um mit verschiedenen Render-Kontexten für überlagernde Elemente wie Dialogen zu arbeiten.\n\nSolid hat eine `<Portal>`-Komponente, deren Kind-Elemente an einer beliebigen Stelle im DOM eingefügt werden. Normalerweise werden die Elemente in einem `<div>` in `document.body` gerendert.\n\nIn dem Beispiel sehen wird, dass unser Popup-Dialog abgeschnitten wird. Wir können dieses Problem lösen, wenn wir das Element aus dem Fluss herausnehmen, indem wir es in ein `<Portal>` stecken:\n\n```jsx\n<Portal>\n  <div class=\"popup\">\n    <h1>Popup</h1>\n    <p>Some text you might need for something or other.</p>\n  </div>\n</Portal>\n```\n";
var flow_portal = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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