<template>
  <div class="flex flex-wrap justify-center">
    <div class="bg-page-dark-bg text-white">
      <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
        <div class="mt-8 flex flex-wrap justify-center"
          v-for="compilation in store.getAllCompilations.slice().reverse()">
          <compilationBox :compilation="compilation" template="full" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDataStore } from '@/store/dataStore'
const store = useDataStore()
</script>
