var lesson = {
	files: [
		{
			name: "main",
			content: "import { render, Dynamic } from \"solid-js/web\";\nimport { createSignal, Switch, Match, For } from \"solid-js\";\n\nconst RedThing = () => <strong style=\"color: red\">Red Thing</strong>;\nconst GreenThing = () => <strong style=\"color: green\">Green Thing</strong>;\nconst BlueThing = () => <strong style=\"color: blue\">Blue Thing</strong>;\n\nconst options = {\n  red: RedThing,\n  green: GreenThing,\n  blue: BlueThing\n}\n\nfunction App() {\n  const [selected, setSelected] = createSignal(\"red\");\n\n  return (\n    <>\n      <select value={selected()} onInput={e => setSelected(e.currentTarget.value)}>\n        <For each={Object.keys(options)}>{\n          color => <option value={color}>{color}</option>\n        }</For>\n      </select>\n      <Switch fallback={<BlueThing />}>\n        <Match when={selected() === \"red\"} ><RedThing /></Match>\n        <Match when={selected() === \"green\"}><GreenThing /></Match>\n      </Switch>\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render, Dynamic } from \"solid-js/web\";\nimport { createSignal, For } from \"solid-js\";\n\nconst RedThing = () => <strong style=\"color: red\">Red Thing</strong>;\nconst GreenThing = () => <strong style=\"color: green\">Green Thing</strong>;\nconst BlueThing = () => <strong style=\"color: blue\">Blue Thing</strong>;\n\nconst options = {\n  red: RedThing,\n  green: GreenThing,\n  blue: BlueThing\n}\n\nfunction App() {\n  const [selected, setSelected] = createSignal(\"red\");\n\n  return (\n    <>\n      <select value={selected()} onInput={e => setSelected(e.currentTarget.value)}>\n        <For each={Object.keys(options)}>{\n          color => <option value={color}>{color}</option>\n        }</For>\n      </select>\n      <Dynamic component={options[selected()]} />\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		}
	]
};
var markdown = "`<Dynamic>` 태그는 데이터를 렌더링할 때 유용합니다. 네이티브 엘리먼트 문자열이나 컴포넌트 함수를 전달할 수 있으며, 제공된 나머지 props를 사용해 렌더링됩니다.\n\n이렇게 하면 여러 개의 `<Show>` 또는 `<Switch>` 컴포넌트를 작성하는 것보다 종종 더 간결합니다.\n\n이 예제에서 다음과 같은 `<Switch>` 문을:\n\n```jsx\n<Switch fallback={<BlueThing />}>\n  <Match when={selected() === 'red'}><RedThing /></Match>\n  <Match when={selected() === 'green'}><GreenThing /></Match>\n</Switch>\n```\n\n아래와 같이 바꿀 수 있습니다:\n\n```jsx\n<Dynamic component={options[selected()]} />\n```\n";
var flow_dynamic = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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