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-index 는 때때로 모달과 같은 플로팅 엘리먼트에 대한 렌더링 컨텍스트를 처리하기에 부족한 경우가 있습니다.\n\nSolid 에는 선택한 위치에 자식 콘텐츠가 삽입되는 `<Portal>` 컴포넌트가 있습니다. 기본적으로 해당 엘리먼트는 `document.body`의 `<div>`에 렌더링됩니다.\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 };
