import { Component, h, Host } from '@stencil/core';
const demo1 = `<dvn-dropdown
  placement="bottomLeft"
  trigger="hover"
>
  <dvn-button>
    Hover On Me
  </dvn-button>

  <div slot="content">
    <dvn-info-summary title="Settings">
    </dvn-info-summary>
    <dvn-info-summary title="Logout">
    </dvn-info-summary>
  </div>
</dvn-dropdown>`;
const demo2 = `<dvn-dropdown
  placement="rightTop"
  trigger="click"
>
  <dvn-button>
    Click On Me
  </dvn-button>

  <div slot="content">
    <dvn-info-summary title="Settings">
    </dvn-info-summary>
    <dvn-info-summary title="Logout">
    </dvn-info-summary>
  </div>
</dvn-dropdown>`;
export class ShowcaseDropdown {
  render() {
    return (h(Host, null,
      h("dvn-card", { leaned: true },
        h("div", { class: "d-flex" },
          h("dvn-component-demo", { domString: demo1 }),
          h("dvn-component-demo", { domString: demo2 })))));
  }
  static get is() { return "showcase-dropdown"; }
}
