hy-two-columns.tsx

import {Component, Host, h, Prop} from '@stencil/core';

@Component({
  tag: 'hy-two-columns',
  styleUrl: 'hy-two-columns.scss',
  shadow: false,
})
export class HyTwoColumns {
  @Prop() reversed: boolean = false;

  render() {
    const classAttributes = ['hy-two-columns', this.reversed ? 'hy-two-columns--reversed' : ''].join(' ');

    return (
      <Host>
        <div class={classAttributes}>
          <div class="hy-two-columns__item hy-two-columns__item--main">
            <slot name="main"></slot>
          </div>
          <div class="hy-two-columns__item hy-two-columns__item--side">
            <slot name="side"></slot>
          </div>
        </div>
      </Host>
    );
  }
}