[Component Pages] Moved code to external md files.

Author: DanilAndreev

src/examples/Code/code.md

@@ -0,0 +1,15 @@
+import React from "react";
+import {H1, H2, H3, H4, H5, H6} from "@material-docs/core/components";
+
+export default function AllHeaders() {
+    return (
+        <React.Fragment>
+            <H1> I am H1 header. I am the biggest.</H1>
+            <H2> I am H2 header. I am so pretty.</H2>
+            <H3> I am H3 header.</H3>
+            <H4> I am H4 header. I have no underline.</H4>
+            <H5> I am H5 header. Also I don't create item in page navigation list.</H5>
+            <H6> I am H6 header. I am the smallest.</H6>
+        </React.Fragment>
+    );
+}

src/examples/Headers/AllHeaders.md

@@ -0,0 +1,9 @@
+import React from "react";
+import Image from "@material-docs/core/components/Image";
+import image from "./images/GithubBannerWide.png";
+
+export default function ImagesOverview() {
+    return (
+        <Image src={image} alt={"overview image"} fullWidth/>
+    );
+}

src/examples/Images/ImagesOverview.md

@@ -0,0 +1,17 @@
+import React from "react";
+import List from "@material-docs/core/components/List";
+import ListItem from "@material-docs/core/components/ListItem";
+
+export default function DecoratedList() {
+    return (
+        <React.Fragment>
+            <List>
+                <ListItem type={"circle"}>I am list item with circle styling</ListItem>
+                <ListItem type={"square"}>I am list item with square styling</ListItem>
+                <ListItem type={"upper-roman"}>I am list item with upper-roman styling</ListItem>
+                <ListItem type={"lower-alpha"}>I am list item with lower-alpha styling</ListItem>
+                <ListItem type={"none"}>I am list item without styling</ListItem>
+            </List>
+        </React.Fragment>
+    );
+}

src/examples/Lists/DecoratedList.md

@@ -0,0 +1,29 @@
+import React from "react";
+import List from "@material-docs/core/components/List";
+import ListItem from "@material-docs/core/components/ListItem";
+import ListItemContained from "@material-docs/core/components/ListItemContained/ListItemContained";
+
+export default function ListWithNestedItems() {
+    return (
+        <React.Fragment>
+            <List>
+                <ListItem>
+                    Web
+                    <ListItemContained>
+                        <ListItem>Front-end</ListItem>
+                        <ListItem>Back-end</ListItem>
+                    </ListItemContained>
+                </ListItem>
+                <ListItem>
+                    <ListItemContained>
+                        <ListItem>Engine programmer</ListItem>
+                        <ListItem>Level designer</ListItem>
+                        <ListItem>Character artist</ListItem>
+                    </ListItemContained>
+                    Gamedev
+                </ListItem>
+                <ListItem>Data science</ListItem>
+            </List>
+        </React.Fragment>
+    );
+}

src/examples/Lists/ListWithNestedItems.md

@@ -0,0 +1,18 @@
+import React from "react";
+import List from "@material-docs/core/components/List";
+import ListItem from "@material-docs/core/components/ListItem";
+import {H4} from "@material-docs/core/components";
+
+export default function SimpleList() {
+    return (
+        <React.Fragment>
+            <H4 noTag>Buy</H4>
+            <List>
+                <ListItem>Carrot x3</ListItem>
+                <ListItem>Potato 3kg</ListItem>
+                <ListItem>Apples 1kg</ListItem>
+                <ListItem>Strawberry 1kg</ListItem>
+            </List>
+        </React.Fragment>
+    );
+}

src/examples/Lists/SimpleList.md

@@ -0,0 +1,21 @@
+import React from "react";
+import Markdown from "@material-docs/core/components/Markdown";
+
+const markdown = `
+\`\`\`{"type": "code", "theme": "darcula"}
+import React from "react";
+
+function test() {
+    console.log("I am function in code element.");
+    return null;
+}
+\`\`\`
+`.trim();
+
+export default function CodeMD() {
+    return (
+        <Markdown>
+            {markdown}
+        </Markdown>
+    );
+}

src/examples/Markdown/CodeMD.md

@@ -0,0 +1,32 @@
+import React from "react";
+import Markdown from "@material-docs/core/components/Markdown";
+
+function HelloWorld() {
+    return (
+        <div>
+            <h1>Hello darkness my old friend</h1>
+        </div>
+    );
+}
+
+const markdown = `
+\`\`\`{"type": "demo-with-code", "theme": "darcula", "name": "DemoWithCode in markdown", "demo": "exampleFunction"}
+import React from "react";
+
+function HelloWorld() {
+    return (
+        <div>
+            <h1>Hello darkness my old friend</h1>
+        </div>
+    );
+}
+\`\`\`
+`.trim();
+
+export default function DemoWithCodeMD() {
+    return (
+        <Markdown data={{exampleFunction: <HelloWorld/>}}>
+            {markdown}
+        </Markdown>
+    );
+}

src/examples/Markdown/DemoWithCodeMD.md

@@ -0,0 +1,21 @@
+import React from "react";
+import Markdown from "@material-docs/core/components/Markdown";
+
+const markdown = `
+\`\`\`{"type": "expansion-code", "theme": "darcula", "name": "ExpansionCode in markdown"}
+import React from "react";
+
+function test() {
+    console.log("I am function in expansion code element.");
+    return null;
+}
+\`\`\`
+`.trim();
+
+export default function ExpansionCodeMD() {
+    return (
+        <Markdown>
+            {markdown}
+        </Markdown>
+    );
+}

src/examples/Markdown/ExpansionCodeMD.md

@@ -0,0 +1,20 @@
+import React from "react";
+import Markdown from "@material-docs/core/components/Markdown";
+
+const markdown = `
+# This is an overview markdown example
+### It generated from markdown text and rendered using Material Docs elements
+> You can change styling by providing theme overrides!
+
+| Hello darkness my old friend     | Здравствуй, ночь, моя старая подруга! |
+|----------------------------------|---------------------------------------|
+| I've come to talk with you again | Я пришел снова побеседовать с тобой   |
+`.trim();
+
+export default function MarkdownOverview() {
+    return (
+        <Markdown>
+            {markdown}
+        </Markdown>
+    );
+}