var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\n\nfunction HelloWorld() {\n  const name = \"Solid\";\n  const svg = (<div>Replace me with an svg</div>)\n\n  return (\n    <>\n      <div>Hello {name}!</div>\n      {svg}\n    </>\n  )\n}\n\nrender(() => <HelloWorld />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\n\nfunction HelloWorld() {\n  const name = \"Solid\";\n  const svg = (\n    <svg height=\"300\" width=\"400\">\n      <defs>\n        <linearGradient id=\"gr1\" x1=\"0%\" y1=\"60%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"5%\" style=\"stop-color:rgb(255,255,3);stop-opacity:1\" />\n          <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" />\n        </linearGradient>\n      </defs>\n      <ellipse cx=\"125\" cy=\"150\" rx=\"100\" ry=\"60\" fill=\"url(#gr1)\" />\n      Sorry but this browser does not support inline SVG.\n    </svg>\n  );\n\n  return (\n    <>\n      <div>Hello {name}!</div>\n      {svg}\n    </>\n  )\n}\n\nrender(() => <HelloWorld />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "JSX is the HTML-like syntax we've seen inside these examples and is core to building components in Solid. \nJSX adds dynamic expressions that allow you to reference variables and functions within your HTML by using the `{ } ` syntax.\nIn this example, we include the string `name` in our HTML using `{name}` inside a div. In the same way, we include an HTML element that was directly assigned to the `svg` variable.\n\nUnlike some other frameworks that use JSX, Solid attempts to stay as close to HTML standards as possible, allowing simple copy and paste from answers on Stack Overflow or from template builders from your designers.\n\nThere are 3 main differences between JSX and HTML that prevent JSX from being seen as a superset of HTML:\n1. JSX does not have void elements. This means that all elements must have a closing tag or self-close. Keep this in mind when copying over elements like `<input>` or `<br>`.\n2. JSX must return a single Element. To represent multiple top level elements, use a Fragment element:\n\n   ```jsx\n   <>\n     <h1>Title</h1>\n     <p>Some Text</p>\n   </>\n   ```\n3. JSX doesn't support HTML Comments `<!--...-->` or special tags like `<!DOCTYPE>`.\n\nBut JSX does support SVG. Let's try copying some SVG right into our component:\n```jsx\n<svg height=\"300\" width=\"400\">\n  <defs>\n    <linearGradient id=\"gr1\" x1=\"0%\" y1=\"60%\" x2=\"100%\" y2=\"0%\">\n      <stop offset=\"5%\" style=\"stop-color:rgb(255,255,3);stop-opacity:1\" />\n      <stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" />\n    </linearGradient>\n  </defs>\n  <ellipse cx=\"125\" cy=\"150\" rx=\"100\" ry=\"60\" fill=\"url(#gr1)\" />\n  Sorry but this browser does not support inline SVG.\n</svg>\n```\n";
var introduction_jsx = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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