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 = "В вашем приложении может возникнуть необходимость отрендерить элементы вне обычного потока приложения. Не все проблемы с модальными окнами могут быть решены с помощью Z-индексов.\n\nСпециально для решения таких задач в Solid есть компонент <Portal>, дочерний контент которого будет вставлен в выбранном вами месте. По умолчанию его элементы будут отображаться в <div> встроенным в `document.body`.\n\nВ этом примере мы видим, что наше всплывающее окно плохо видно. Мы можем решить эту проблему, использовав <Portal> `: \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 };
