CandidateSecondaryList.vue

<script setup>
  import CandidateSecondaryBox from "./CandidateSecondaryBox"
</script>

<template>
  <div class="bg-grey-180">
    <ul class="candidate-secondary-list pt-14 pb-16 hidden" ref="content">
      <div class="container--wide">
        <h2 class="head-7xl mb-3">{{ heading }}</h2>
      </div>

      <CandidateSecondaryBox
        v-for="candidate in candidates"
        :key="candidate.position"
        :url="candidate.url"
        :number="candidate.number"
        :imageSource="candidate.imageSource"
        :name="candidate.name"
        :position="candidate.position"
      />
    </ul>

    <div
      class="pt-14 pb-16 flex justify-center"
      ref="button"
    >
      <button
        @click="openList()"

        class="
          flex items-center group rounded-full font-condensed uppercase font-semibold tracking-normal bg-black text-white

          hover:no-underline

          pl-8 pr-3 py-3

          xl:text-lg xl:pl-8 xl:pr-3 xl:py-4
        "
      >
        <span class="group-hover:-translate-x-2 duration-200">Další kandidáti</span>
        <span class="opacity-0 group-hover:opacity-100 duration-200 mb-[0.03rem]">
          <svg width="20" height="21" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="Icon / Placeholder">
              <path
                d="M0 16.5H4.40178L11 10.0002L4.40228 3.5H0L6.60069 10.0002L0 16.5Z"
                fill="#FEC900"
                class="arrow-icon"
              />
            </g>
          </svg>
        </span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "CandidateSecondaryList",
  props: ["heading", "candidates"],
  methods: {
    openList () {
      this.$refs.content.classList.remove('hidden')
      this.$refs.button.classList.add('hidden')
    }
  }
}
</script>