Button

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Buttons</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block-title">Usual Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Tonal Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-tonal">Button</button>
          <button class="button button-tonal">Button</button>
          <button class="button button-tonal button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Fill Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-fill">Button</button>
          <button class="button button-fill">Button</button>
          <button class="button button-fill button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Outline Buttons</div>
      <div class="block block-strong block-outline-ios">
        <div class="grid grid-cols-3 grid-gap">
          <button class="button button-outline">Button</button>
          <button class="button button-outline">Button</button>
          <button class="button button-outline button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Raised Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-raised">Button</button>
          <button class="button button-raised button-fill">Fill</button>
          <button class="button button-outline button-raised">Outline</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-raised button-round">Round</button>
          <button class="button button-raised button-fill button-round">Fill</button>
          <button class="button button-outline button-round button-raised">Outline</button>
        </p>
      </div>

      <div class="block-title">Large Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large">Button</button>
          <button class="button button-large button-fill">Fill</button>
        </p>
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large button-raised">Raised</button>
          <button class="button button-large button-raised button-fill">Raised Fill</button>
        </p>
        <p class="grid grid-cols-2 grid-gap">
          <button class="button button-large button-round">Round</button>
          <button class="button button-large button-round button-fill">Round Fill</button>
        </p>
      </div>

      <div class="block-title">Small Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-small">Button</button>
          <button class="button button-small button-outline">Outline</button>
          <button class="button button-small button-fill">Fill</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-small button-round">Button</button>
          <button class="button button-small button-round button-outline">Outline</button>
          <button class="button button-small button-round button-fill">Fill</button>
        </p>
      </div>
      <div class="block-title">Color Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button color-red">Red</button>
          <button class="button color-green">Green</button>
          <button class="button color-blue">Blue</button>
        </p>
      </div>

      <div class="block-title">Preloader Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-2 grid-gap">
          <span>
            <button class="button button-large button-preloader ${isLoading1 ? 'button-loading' : ''}" @click=${load1}>
              <span class="preloader"></span>
              <span>Load</span>
            </button>
          </span>
          <span>
            <button class="button button-large button-fill button-preloader ${isLoading2 ? 'button-loading' : ''}"
              @click=${load2}>
              <span class="preloader"></span>
              <span>Load</span>
            </button>
          </span>
        </p>
      </div>

      <div class="block-title">Color Fill Buttons</div>
      <div class="block block-strong block-outline-ios">
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-red">Red</button>
          <button class="button button-fill color-green">Green</button>
          <button class="button button-fill color-blue">Blue</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-pink">Pink</button>
          <button class="button button-fill color-yellow">Yellow</button>
          <button class="button button-fill color-orange">Orange</button>
        </p>
        <p class="grid grid-cols-3 grid-gap">
          <button class="button button-fill color-black">Black</button>
          <button class="button button-fill color-white">White</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let isLoading1 = false;
    let isLoading2 = false;

    const load1 = () => {
      if (isLoading1) return;
      isLoading1 = true;
      $update();
      setTimeout(() => {
        isLoading1 = false;
        $update();
      }, 4000);
    };
    const load2 = () => {
      if (isLoading2) return;
      isLoading2 = true;
      $update();
      setTimeout(() => {
        isLoading2 = false;
        $update();
      }, 4000);
    };

    return $render;
  }
</script>