designtopack/src/views/Inspirations.vue

<template>
  <main>
    <h2 id="tabslist" class="sr-only">Inspirations</h2>
    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
    <Selector
      :all="page.inspirations"
      @update:currentInspiration="changeInspiration"
    />
    <section :id="currentTab" class="inspiration">
      <Header
        v-if="currentTab !== 'favorites'"
        :inspiration="currentInspiration"
      />
      <div class="masonry flow">
        <template
          v-for="(item, index) in currentInspiration.media"
          :key="item.id"
        >
          <Image
            :item="item"
            :inspirationUri="currentInspiration.uri"
            :currentTab="currentTab"
          />
        </template>
      </div>
    </section>
  </main>
</template>

<script setup>
import Selector from "../components/inspirations/Selector.vue";
import Header from "../components/inspirations/Header.vue";
import Tabs from "../components/Tabs.vue";
import Image from "../components/inspirations/Image.vue";
import { useUserStore } from "../stores/user";
import { ref, computed } from "vue";
import { usePageStore } from "../stores/page";
import { storeToRefs } from "pinia";

const { page } = storeToRefs(usePageStore());
const user = useUserStore().user;
const currentTab = ref("all");
const tabs = computed(() => {
  return [
    {
      label: "Les Inspirations",
      id: "all",
      icon: null,
      count: currentInspiration.value.media.length,
      isActive: currentTab.value === "all",
    },
    {
      label: "Mes Favoris",
      id: "favorites",
      icon: "favorite",
      count: favoriteImages.value.length,
      isActive: currentTab.value === "favorites",
    },
  ];
});

const currentInspiration = ref(page.value.inspirations[0]);
const favoriteImages = computed(() => {
  return currentInspiration.value.media.filter(
    (image) => image.favoriteForUsers?.includes(user.uuid) ?? false
  );
});

function changeTab(newValue) {
  currentTab.value = newValue;
}

function changeInspiration(newValue) {
  console.log(newValue);
  currentInspiration.value = newValue;
}
</script>

<style scoped>
/* Tabs */
[role="tablist"] {
  margin-left: 0;
}

/* Masonry */
@media (min-width: 40rem) {
  .masonry {
    column-count: 2;
  }
}
@media (min-width: 65rem) {
  .masonry {
    column-count: 3;
  }
}
@media (min-width: 90rem) {
  .masonry {
    column-count: 4;
  }
}
</style>