<div class="min-h-screen flex justify-center">
  <div class="max-w-screen-lg flex justify-around items-start">
    <div class="w-full bg-gray-200 border border-gray-400 rounded-xl text-center p-8 m-8" x-data="left()" x-init="init()">
      <h2 class="text-3xl text-semibold">Component left</h2>
      <p class="text-lg">Write something into the input field and store it.</p>
      <input type="text" x-model="value" placeholder="Write something..." class="border-2 border-gray-300 rounded-lg w-full text-xl px-4 py-2 my-4" />
      <button type="button" class="text-xl leading-none bg-teal-600 rounded-xl text-white font-bold px-6 py-3 hover:bg-black" @click="store()">STORE</button>

    </div>
    <div class="w-full bg-gray-200 border border-gray-400 rounded-xl text-center p-8 m-8" x-data="right()" x-init="init()">
      <h2 class="text-3xl text-semibold">Component right</h2>
      <p class="text-lg">If something is in the store you can see it.</p>
      <div class="text-xl font-semibold border-2 border-gray-300 rounded-xl px-6 py-3 my-4">
        <template x-for="(item, index) in $store.data.values" :key="index" x-if="$store.data.values.length > 0">
          <div class="flex flex-wrap items-center my-2">
            <span class="flex-grow text-left" x-text="item"></span>
            <button type="button" class="text-base leading-none text-red-700 font-black rounded-full w-10 h-10 p-1 ml-2 hover:bg-black hover:text-white" @click="remove(index)">X</button>
          </div>
        </template>
        <template x-if="$store.data.values.length === 0">
          <div class="flex-grow text-left font-light text-gray-500">Nothing is in it...</div>
        </template>
      </div>
    </div>
  </div>
</div>

.font-sans {
  font-family: Raleway, Helvetica, Arial, sans-serif !important;
}

function left() {
  return {
    value: "",
    store: function () {
      this.$store.data.addValue(this.value);
      console.info("Written to the store:", this.value);
      this.value = "";
    },
    init: function () {
      console.info("Init call left");
    }
  };
}

function right() {
  return {
    value: "Nothing stored...",
    remove: function (index) {
      console.info("Remove item:", index);
      this.$store.data.values.splice(index, 1);
    },
    init: function () {
      console.info("Init call right");
    }
  };
}

Spruce.store(
  "data",
  {
    values: [],
    addValue(value) {
      this.values.push(value);
    }
  },
  true
);