From d79f195913d43fe1411c960d20a6fc1b53bb687d Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Mon, 9 Sep 2024 20:03:24 +0200
Subject: [PATCH] Update Inspirations view, components and json template

---
 public/site/templates/inspirations.json.php |  12 +-
 src/components/Inspirations.vue             | 211 ++++++++++++++++++++
 src/views/Inspirations.vue                  |  24 ++-
 3 files changed, 239 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Inspirations.vue

diff --git a/public/site/templates/inspirations.json.php b/public/site/templates/inspirations.json.php
index 148baf1..8c5b268 100644
--- a/public/site/templates/inspirations.json.php
+++ b/public/site/templates/inspirations.json.php
@@ -1,8 +1,16 @@
 <?php
 
+$children = $page->children()->map(function ($child) {
+  return [
+    'title' => $child->title()->value(),
+    'url' => $child->url(),
+    'modified' => $child->modified('Y-m-d'),
+    'media' => $child->media()->toFiles()
+  ];
+})->values();
+
 $specificData = [
-  "exampleField" => $page->exampleField(),
-  "exampleHardData" => 'Example hard value'
+  "children" => $children,
 ];
 
 $data = array_merge($genericData, $specificData);
diff --git a/src/components/Inspirations.vue b/src/components/Inspirations.vue
new file mode 100644
index 0000000..9168149
--- /dev/null
+++ b/src/components/Inspirations.vue
@@ -0,0 +1,211 @@
+<template>
+  <h2 id="tabslist" class="sr-only">Inspirations</h2>
+  <!-- 2 Tabs:
+  label: "Les Inspirations", id: "inspirations", count: false 
+  label: "Mes Favoris", id: "favorites", count: true
+  
+  <template v-if="data">
+    <Tabs :projects="data.children" @update:currentTab="changeTab" />
+    <TabPanel :projects="data.children" :currentTab="currentTab" />
+  </template>
+  -->
+  
+  <div id="inspiration-select" class="flex" style="--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
+    <label for="inspirations">Choisir une inspiration</label>
+    <select id="inspirations">
+      <option value="shape-of-nature" selected>Shape of Nature</option>
+      <option value="inspiration-slug">Inspiration Title</option>
+    </select>
+  </div>
+
+  <!-- TabPanel -->
+  <section class="inspiration">
+    <header class="flex | text-center" style="--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"> <!-- $inspiration->cover()->url() -->
+      <h2 class="inspiration__title | font-serif | text-lg | new">Shape of Nature</h2> <!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
+      <time class="inspiration__date | font-medium | text-sm" datatime="2024-04">Avril 2024</time> <!-- $inspiration->date() -->
+      <p class="inspiration__description">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p> <!-- $inspiration->description() -->
+    </header>
+    <div class="grid masonry">
+      <figure class="flex" style="--rows:2">
+        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
+          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <img src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+      </figure>
+      <figure class="flex"  style="--rows:3">
+        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
+          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+      </figure>
+      <figure class="flex" style="--rows:2">
+        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
+          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <img src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+      </figure>
+      <figure class="flex" style="--rows:3">
+        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
+          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+      </figure>
+      <figure class="flex" style="--rows:2">
+        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
+          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <img src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+      </figure>
+      <figure class="flex" style="--rows:3">
+        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
+          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+      </figure>
+      <figure class="flex" style="--rows:2">
+        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
+          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <img src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+      </figure>
+      <figure class="flex" style="--rows:3">
+        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
+          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+      </figure>
+    </div>
+  </section>
+
+</template>
+
+<script setup>
+import Tabs from "./Tabs.vue";
+import TabPanel from "./TabPanel.vue";
+import { useApiStore } from "../stores/api";
+import { ref } from "vue";
+
+const data = ref(null);
+const currentTab = ref("current");
+
+const api = useApiStore();
+api.fetchPageData("inspirations").then((res) => (data.value = res));
+</script>
+
+<style scoped>
+
+/* Select */
+#inspiration-select {
+  --direction: column;
+  --items: flex-start;
+  --wrap: no-wrap;
+  --row-gap: 0;
+  position: relative;
+  float: right;
+  background: var(--color-background);
+  border-radius: var(--rounded-full);
+  height: 3.75rem;
+  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
+  margin-bottom: var(--space-16);
+}
+#inspiration-select::before {
+  content: '';
+  position: absolute;
+  left: var(--space-8);
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: var(--rounded-full);
+  background-image: var(--image);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+/* Inspiration */
+.inspiration > header {
+  --direction: column;
+  --justify: center;
+  --row-gap: var(--space-8);
+  clear: both;
+  height: 15rem; /* 240px */
+  background: 
+    linear-gradient(to right, transparent, var(--color-white-50) 100%),
+    var(--image);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  margin-bottom: var(--space-16);
+  border-radius: var(--rounded-lg);
+}
+.inspiration__title.new::after {
+  content: 'Nouveauté';
+  display: inline-block;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  border-radius: var(--rounded-sm);
+  background-color: var(--color-primary-10);
+  color: var(--color-primary-100);
+  margin-left: var(--space-16);
+  padding: var(--space-4) var(--space-12);
+  transform: translateY(-0.1em);
+}
+.inspiration__date, 
+.inspiration__description {
+  color: var(--color-grey-700);
+}
+
+
+/* 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;
+}
+.masonry > * {
+  position: relative;
+  grid-row: span var(--rows);
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+}
+.masonry img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+/* Favorite button */
+.favorite {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: var(--space-8);
+  padding: var(--space-8);
+  color: var(--color-grey-400);
+}
+.favorite[aria-pressed="true"] {
+  color: var(--color-brand);
+}
+
+</style>
diff --git a/src/views/Inspirations.vue b/src/views/Inspirations.vue
index 06edc1d..b5a768c 100644
--- a/src/views/Inspirations.vue
+++ b/src/views/Inspirations.vue
@@ -1,16 +1,28 @@
 <template>
-  <h1>{{ data.content.title }}</h1>
-  <!-- ... -->
+  <h1 class="sr-only">{{ data.content.title }}</h1>
+  <div class="with-sidebar">
+    <!-- Changer le Menu actif
+      class="active" sur le <li>
+      aria-current="page" sur le <a>
+    -->
+    <Menu /> 
+    <main>
+      <Inspirations />
+    </main>
+  </div>
 </template>
 
-<style scoped>
-  
-</style>
-
 <script setup>
+import Menu from "../components/Menu.vue";
+import Inspirations from "../components/Inspirations.vue";
+
 const { data } = defineProps({
   data: Object,
 });
 
 // ....
 </script>
+
+<style scoped>
+  
+</style>
\ No newline at end of file