import React from "react"
import ReactDemoPage from "react-demo-page"
import YourReactComponent from "./src/YourReactComponent"
import pkg from "../package.json"
 
const routes = [
  // A page with only html
  {
    path: "/",
    exact: true,
    html: html,
    label: "Home",
  },
  // A page with demo component and html as presentation
  {
    path: "/demo",
    demo: {
      component: <YourReactComponent />,
      html: html,
    },
    label: "Demo",
  },
  // A custom page
  {
    path: "/myCustomPage",
    component: (
      <div>
        <h2>{"Title"}</h2>
        <YourReactComponent />
      </div>
    ),
    label: "Custom page",
  },
]
 
const header = {
  title: pkg.name,
  buttons: [
    {label: "Github", url: pkg.homepage},
    {label: "Npm", url: `https://www.npmjs.com/package/${pkg.name}`},
    {label: "Download", url: `${pkg.homepage}/archive/master.zip`},
  ],
}
 
const footer = {
  author: pkg.author,
}
 
const Demo = () =>
  <ReactDemoPage
    basename={pkg.name} // You need this if you deploy on Github page
    header={header}
    footer={footer}
    pages={routes}
    color="#3498db"
  />