import { Component, h } from '@stencil/core';
import { Heading, Paragraph, ResponsiveContainer } from '../../core';
import { createRouter, Route, match, href } from 'stencil-router-v2';
const Router = createRouter();
export class DocsRoot {
  render() {
    return (h("site-root", null,
      h(ResponsiveContainer, null,
        h(Router.Switch, null,
          h(Route, { path: "/" },
            h("component-list", null)),
          h(Route, { path: "/demo" },
            h("shared-demo", null)),
          h(Route, { path: match("/overview/:component"), render: ({ component }) => h("component-overview", { component: component }) }),
          h(Route, { path: match("/detail/:component/:example"), render: ({ component, example }) => h("component-detail", { component: component, example: example }) }),
          h(Route, { path: "/demo" },
            h("shared-demo", null)),
          h(Route, { path: /^.*/ },
            h(Heading, null, "404: Nothing to see here"),
            h(Paragraph, null,
              h("a", Object.assign({}, href('/')), "Go Home")),
            h("img", { src: "https://i.imgflip.com/48lv0y.jpg" }))))));
  }
  static get is() { return "docs-root"; }
  static get styles() { return ".ui-container {\n      padding: var(--space-6) 0;\n    }"; }
}
