designtopack/src/views/Inspirations.vue

<template>
  <h1 class="sr-only">{{ data.content.title }}</h1>
  <div class="with-sidebar">
    <Menu />
    <main>
      <h2 id="tabslist" class="sr-only">Inspirations</h2>
      <Tabs :tabs="tabs" @update:currentTab="changeTab" />
      <Selector />
      <section :id="currentTab" class="inspiration">
        <Header :inspiration="currentInspiration" />
        <div class="grid masonry">
          <template
            v-for="(item, index) in currentInspiration.media"
            :key="item.id"
          >
            <Image
              :item="item"
              :inspirationUri="currentInspiration.uri"
              :currentTab="currentTab"
            />
          </template>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import Menu from "../components/Menu.vue";
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";

const { data } = defineProps({
  data: Object,
});

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

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

function changeTab(newValue) {
  currentTab.value = newValue;
}
</script>

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

/* Masonry */
.masonry {
  --gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 20rem), 1fr));
  grid-auto-rows: 12rem;
  grid-auto-flow: dense;
}
</style>