feat: description

src/views/RoomsPage.vue

@@ -12,6 +12,7 @@ import "swiper/css";
 import "swiper/css/pagination";
 
 const data = ref();
+const currentRoomIndex = ref(0);
 
 const getRooms = async () => {
   const options = {
@@ -32,6 +33,8 @@ onMounted(async () => {
 
 <template>
   <ion-page class="page">
+    <swiper direction="vertical" class="swiper-vertical">
+      <swiper-slide class="top-content">
         <PagesHeader />
         <main>
           <h2>Les salles</h2>
@@ -47,7 +50,10 @@ onMounted(async () => {
             :modules="[Pagination]"
             :space-between="250"
             :auto-height="false"
-        class="mySwiper"
+            @slide-change-transition-end="
+              (e) => (currentRoomIndex = e.activeIndex)
+            "
+            class="swiper-horizontal"
           >
             <swiper-slide v-for="element in data" :key="element.titre">
               <section>
@@ -59,6 +65,12 @@ onMounted(async () => {
           </swiper>
           <div slot="pagination" class="swiper-pagination"></div>
         </main>
+      </swiper-slide>
+      <swiper-slide class="bottom-content">
+        <h2>{{ data && data[currentRoomIndex].fields.titre }}</h2>
+        <p>{{ data && data[currentRoomIndex].fields.description }}</p>
+      </swiper-slide>
+    </swiper>
   </ion-page>
 </template>
 
@@ -129,11 +141,50 @@ audio {
   margin-top: 32px;
 }
 
-.mySwiper {
+.swiper-horizontal {
   width: 100%;
   height: 100%;
   min-height: 0;
 }
+
+.swiper-vertical {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.top-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.bottom-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  padding: 32px;
+
+  height: 100%;
+  min-height: 0;
+
+  background-image: linear-gradient(-45deg, #7e33ac 0, #282828 60%);
+}
+
+.bottom-content h2 {
+  font-size: 50px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.bottom-content p {
+  font-size: 27px;
+  font-weight: 500;
+  color: var(--ion-color-dark);
+  margin: 0;
+}
 </style>
 
 <style>
@@ -148,4 +199,14 @@ audio {
 .pagination-bullet-active {
   background-color: var(--ion-color-dark);
 }
+
+@media (prefers-color-scheme: light) {
+  .bottom-content {
+    background-image: linear-gradient(
+      -45deg,
+      #983dd1 0,
+      #ffffff 60%
+    ) !important;
+  }
+}
 </style>