var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport Nested from \"./nested\";\nimport { CounterProvider } from \"./counter\";\n\nfunction App() {\n  return <>\n    <h1>Welcome to Counter App</h1>\n    <Nested />\n  </>\n};\n\nrender(() => <App />, document.getElementById(\"app\"));"
		},
		{
			name: "nested",
			content: "import { useCounter } from \"./counter\";\n\nexport default function Nested() {\n  return (\n    <>\n      <div>0</div>\n      <button>+</button>\n      <button>-</button>\n    </>\n  );\n};"
		},
		{
			name: "counter",
			content: "import { createSignal, createContext, useContext } from \"solid-js\";\n\nconst CounterContext = createContext();\n\nexport function CounterProvider(props) {\n  const [count, setCount] = createSignal(props.count || 0),\n    store = [\n      count,\n      {\n        increment() {\n          setCount(c => c + 1);\n        },\n        decrement() {\n          setCount(c => c - 1);\n        }\n      }\n    ];\n\n  return (\n    <CounterContext.Provider value={store}>\n      {props.children}\n    </CounterContext.Provider>\n  );\n}\n\nexport function useCounter() { return useContext(CounterContext); }"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport Nested from \"./nested\";\nimport { CounterProvider } from \"./counter\";\n\nfunction App() {\n  return <>\n    <h1>Welcome to Counter App</h1>\n    <Nested />\n  </>\n};\n\nrender(() => (\n  <CounterProvider count={1}>\n    <App />\n  </CounterProvider>\n), document.getElementById(\"app\"));"
		},
		{
			name: "nested",
			content: "import { useCounter } from \"./counter\";\n\nexport default function Nested() {\n  const [count, { increment, decrement }] = useCounter();\n  return (\n    <>\n      <div>{count()}</div>\n      <button onClick={increment}>+</button>\n      <button onClick={decrement}>-</button>\n    </>\n  );\n};"
		},
		{
			name: "counter",
			content: "import { createSignal, createContext, useContext } from \"solid-js\";\n\nconst CounterContext = createContext();\n\nexport function CounterProvider(props) {\n  const [count, setCount] = createSignal(props.count || 0),\n    store = [\n      count,\n      {\n        increment() {\n          setCount(c => c + 1);\n        },\n        decrement() {\n          setCount(c => c - 1);\n        }\n      }\n    ];\n\n  return (\n    <CounterContext.Provider value={store}>\n      {props.children}\n    </CounterContext.Provider>\n  );\n}\n\nexport function useCounter() { return useContext(CounterContext); }"
		}
	]
};
var markdown = "Solid는 props를 사용하지 않으면서 데이터를 전달할 수 있도록 Context API를 제공합니다.\n이는 Signal과 Store를 공유할 때 유용합니다.\n컨텍스트를 사용하면 리액티브 시스템의 일부로 생성되고, 이에 의해 관리된다는 장점이 있습니다.\n\n시작하려면 먼저 Context 객체를 생성합니다.\nContext 객체에는 데이터를 주입하는데 사용되는 `Provider` 컴포넌트가 포함되어 있습니다.\n일반적으로 `Provider` 컴포넌트를 특정 컨텍스트용으로 설정된 `useContext` 컨슈머를 사용해 래핑해 사용합니다.\n\n이 튜토리얼에 있는 내용이 바로 이 부분입니다.\n`counter.tsx` 파일에서 간단한 카운터 Store에 대한 정의를 확인할 수 있습니다.\n\n컨텍스트를 사용하려면 먼저 App 컴포넌트를 래핑하여 전역적으로 제공합니다.\n우리는 래핑된 `CounterProvider`를 사용하며, 이 경우 초기 카운트값을 1로 설정합니다.\n\n```jsx\nrender(() => (\n  <CounterProvider count={1}>\n    <App />\n  </CounterProvider>\n), document.getElementById(\"app\"));\n```\n\n다음으로 `nested.tsx` 컴포넌트에서 `useCounter` 컨슈머를 사용해 카운터 컨텍스트를 사용합니다.\n\n```jsx\nconst [count, { increment, decrement }] = useCounter();\nreturn (\n  <>\n    <div>{count()}</div>\n    <button onClick={increment}>+</button>\n    <button onClick={decrement}>-</button>\n  </>\n);\n```\n";
var stores_context = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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