import { Component, h, Host } from '@stencil/core';
const demo1 = `<dvn-input-group leaned>
  <dvn-input placeholder="Email" type="email"></dvn-input>
  <dvn-input placeholder="Password" type="password"></dvn-input>
  <dvn-button tint="primary">Login</dvn-button>
</dvn-input-group>`;
const demo3 = `<dvn-input-group leaned>
  <dvn-select width="50px" hide-caret="true" hide-check="true">
    <dvn-select-option>HH</dvn-select-option>
    <dvn-select-option value="0">0</dvn-select-option>
    <dvn-select-option value="6">6</dvn-select-option>
    <dvn-select-option value="12">12</dvn-select-option>
    <dvn-select-option value="18">18</dvn-select-option>
  </dvn-select>
  <dvn-select width="50px" hide-caret="true" hide-check="true">
    <dvn-select-option>mm</dvn-select-option>
    <dvn-select-option value="0">0</dvn-select-option>
    <dvn-select-option value="15">15</dvn-select-option>
    <dvn-select-option value="30">30</dvn-select-option>
    <dvn-select-option value="45">45</dvn-select-option>
  </dvn-select>
</dvn-input-group>`;
const demo2 = `<dvn-input-group leaned>
  <dvn-input placeholder="Amount" type="number" width="100px"></dvn-input>
  <dvn-select width="50px">
    <dvn-select-option>?</dvn-select-option>
    <dvn-select-option value="gbp">£</dvn-select-option>
    <dvn-select-option value="try">₺</dvn-select-option>
    <dvn-select-option value="usd">$</dvn-select-option>
  </dvn-select>
</dvn-input-group>`;
export class ShowcaseBadge {
  render() {
    return (h(Host, null,
      h("dvn-card", { leaned: true },
        h("div", { class: "mb-3" },
          h("dvn-component-demo", { domString: demo1 })),
        h("div", { class: "mb-3" },
          h("dvn-component-demo", { domString: demo2 })),
        h("div", { class: "mb-3" },
          h("dvn-component-demo", { domString: demo3 })))));
  }
  static get is() { return "showcase-input-group"; }
}
