import { Component, h } from '@stencil/core';
import { Heading } from '../../core';
import coreExamples from '../../core/examples';
import webExamples from '../../web/examples';
import { href } from 'stencil-router-v2';
export class ComponentList {
  render() {
    return [
      listSection('Core Components', coreExamples),
      listSection('Web Components', webExamples)
    ];
  }
  static get is() { return "component-list"; }
  static get styles() { return ".demo-container {\n      margin-bottom: var(--space-6);\n    }"; }
}
const listSection = (title, components) => (h("div", { class: "demo-container" },
  h(Heading, null, title),
  h("ul", { class: "component-list" }, Object.keys(components).map(name => (h("li", null,
    h("a", Object.assign({}, href(`/overview/${components[name].default.title}`)), components[name].default.title)))))));
