From 88df455a599aa2c3631ec0610d8318db3aeb469b Mon Sep 17 00:00:00 2001
From: Kristof Vandenbroucke <kristof.vandenbrouck@gmail.com>
Date: Sat, 16 Dec 2023 12:52:54 +0100
Subject: [PATCH] Add banner to the different pages

---
 components/banner/banner.vue                  |  8 ++++--
 components/banner/style.scss                  | 26 ++++++++++++++-----
 content/geudenstraat/configuration.json       |  6 ++++-
 .../geudenstraat/kamer-1/configuration.json   |  6 ++++-
 .../geudenstraat/kamer-2/configuration.json   |  6 ++++-
 content/sloefke/configuration.json            |  6 ++++-
 content/sloefke/kamer-1/configuration.json    |  6 ++++-
 content/sloefke/kamer-2/configuration.json    |  6 ++++-
 content/sloefke/kamer-3/configuration.json    |  6 ++++-
 pages/geudenstraat/index.vue                  |  1 +
 pages/sloefke/[...slug].vue                   |  1 +
 pages/sloefke/index.vue                       |  1 +
 types/banner.ts                               |  5 ++++
 types/room.ts                                 |  2 ++
 types/studentHouse.ts                         |  2 ++
 15 files changed, 73 insertions(+), 15 deletions(-)
 create mode 100644 types/banner.ts

diff --git a/components/banner/banner.vue b/components/banner/banner.vue
index 6e37024..2c46315 100644
--- a/components/banner/banner.vue
+++ b/components/banner/banner.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="banner">
-    <span class="banner__title"> Hello world </span>
+    <span class="banner__title"> {{ title }} </span>
+    <span class="banner__content"> {{ content }} </span>
   </div>
 </template>
 
-<script setup lang="ts" name="banner"></script>
+<script setup lang="ts" name="banner">
+import type { Banner } from '~/types/banner'
+defineProps<Banner>()
+</script>
 <style scoped lang="scss" src="./style.scss" />
diff --git a/components/banner/style.scss b/components/banner/style.scss
index 537d59a..3ebe79b 100644
--- a/components/banner/style.scss
+++ b/components/banner/style.scss
@@ -1,17 +1,31 @@
 .banner {
     @extend %page-container;
     position: relative;
-    grid-template-areas: '. . articles articles articles articles articles articles articles articles . .';
-
+    grid-template-areas: 
+    ". title title title title title title title title title title ."
+    ". content content content content content content content content content content .";
     width: 100%;
     height: 100%;
-    min-height: 20rem;
+    min-height: 30rem;
+    grid-gap: calc($spacing-base * 2) 0;
+
+    @media (min-width: $break-md) {
+        grid-template-areas: 
+        ". . title title title title title title title title . ."
+        ". . content content content content content content content content . .";
+    }
 
-    background-color: $color-red;
+    background-color: $color-yellow;
 
     &__title {
-        grid-area: articles;
-        color: $color-white;
+        @extend %h3;
+        grid-area: title;
         font-size: $font-size-title-md;
     }
+
+    &__content {
+        @extend %body-copy-2;
+        grid-area: content;
+        overflow: scroll
+    }
 }
diff --git a/content/geudenstraat/configuration.json b/content/geudenstraat/configuration.json
index fd7674a..1479326 100644
--- a/content/geudenstraat/configuration.json
+++ b/content/geudenstraat/configuration.json
@@ -14,5 +14,9 @@
     {
       "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     }
-  ]
+  ],
+  "banner": {
+    "title": "Meer te weten komen over de Geudenstraat?",
+    "content": "Neem contact met ons op via email op het adres kristof.vandenbrouck@gmail.com of telefonisch op +32476271508"
+  }
 }
diff --git a/content/geudenstraat/kamer-1/configuration.json b/content/geudenstraat/kamer-1/configuration.json
index 83c4600..f0284bf 100644
--- a/content/geudenstraat/kamer-1/configuration.json
+++ b/content/geudenstraat/kamer-1/configuration.json
@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres kristof.vandenbrouck@gmail.com of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }
diff --git a/content/geudenstraat/kamer-2/configuration.json b/content/geudenstraat/kamer-2/configuration.json
index 97ef0a5..5438e84 100644
--- a/content/geudenstraat/kamer-2/configuration.json
+++ b/content/geudenstraat/kamer-2/configuration.json
@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres kristof.vandenbrouck@gmail.com of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }
diff --git a/content/sloefke/configuration.json b/content/sloefke/configuration.json
index a18b703..ed10f4d 100644
--- a/content/sloefke/configuration.json
+++ b/content/sloefke/configuration.json
@@ -14,5 +14,9 @@
     {
       "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     }
-  ]
+  ],
+  "banner": {
+    "title": "Meer te weten komen over het Sloefke?",
+    "content": "Neem contact met ons op via email op het adres kristof.vandenbrouck@gmail.com of telefonisch op +32476271508"
+  }
 }
diff --git a/content/sloefke/kamer-1/configuration.json b/content/sloefke/kamer-1/configuration.json
index 075e406..4c4ad16 100644
--- a/content/sloefke/kamer-1/configuration.json
+++ b/content/sloefke/kamer-1/configuration.json
@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres kristof.vandenbrouck@gmail.com of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }
diff --git a/content/sloefke/kamer-2/configuration.json b/content/sloefke/kamer-2/configuration.json
index 67e6a01..0a31353 100644
--- a/content/sloefke/kamer-2/configuration.json
+++ b/content/sloefke/kamer-2/configuration.json
@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres kristof.vandenbrouck@gmail.com of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }
diff --git a/content/sloefke/kamer-3/configuration.json b/content/sloefke/kamer-3/configuration.json
index aad8197..7d6fe6c 100644
--- a/content/sloefke/kamer-3/configuration.json
+++ b/content/sloefke/kamer-3/configuration.json
@@ -58,5 +58,9 @@
       "title": "Eigen douche",
       "value": "Ja"
     }
-  ]
+  ],
+  "banner": {
+    "title": "Interesse in deze kamer?",
+    "content": "Neem contact met ons op via email op het adres kristof.vandenbrouck@gmail.com of telefonisch op +32476271508. Vergeet zeker niet de kamer te vermelden waarin je interesse hebt."
+  }
 }
diff --git a/pages/geudenstraat/index.vue b/pages/geudenstraat/index.vue
index e2f76c8..42c4b2b 100644
--- a/pages/geudenstraat/index.vue
+++ b/pages/geudenstraat/index.vue
@@ -17,6 +17,7 @@
     </template>
   </typography>
   <cards :items="data?.rooms" title="Onze studentenkamers" />
+  <banner v-if="data?.content?.banner" v-bind="data?.content?.banner" />
   <c-footer />
 </template>
 
diff --git a/pages/sloefke/[...slug].vue b/pages/sloefke/[...slug].vue
index 69fe1e1..ed7b202 100644
--- a/pages/sloefke/[...slug].vue
+++ b/pages/sloefke/[...slug].vue
@@ -14,6 +14,7 @@
   </typography>
   <room-details :details="data?.details" />
   <image-gallery :images="data?.images" />
+  <banner v-if="data?.banner" v-bind="data?.banner" />
   <c-footer />
 </template>
 
diff --git a/pages/sloefke/index.vue b/pages/sloefke/index.vue
index 30e255c..5abdfd7 100644
--- a/pages/sloefke/index.vue
+++ b/pages/sloefke/index.vue
@@ -17,6 +17,7 @@
     </template>
   </typography>
   <cards :items="data?.rooms" title="Onze studentenkamers" />
+  <banner v-if="data?.content?.banner" v-bind="data?.content?.banner" />
   <c-footer />
 </template>
 
diff --git a/types/banner.ts b/types/banner.ts
new file mode 100644
index 0000000..919d8c9
--- /dev/null
+++ b/types/banner.ts
@@ -0,0 +1,5 @@
+
+export type Banner = {
+    title?: string,
+    content?: string
+}
\ No newline at end of file
diff --git a/types/room.ts b/types/room.ts
index 6437007..3bfb850 100644
--- a/types/room.ts
+++ b/types/room.ts
@@ -1,11 +1,13 @@
 import type { Card } from "~/types/card";
 import type { Paragraph } from "~/types/paragraph";
 import type { Image } from "~/types/image";
+import type { Banner } from "~/types/banner";
 
 export interface Room extends Card {
     paragraphs?: Paragraph[];
     images?: Image[];
     details?: RoomDetail[]
+    banner?: Banner
 }
 
 export interface RoomDetail {
diff --git a/types/studentHouse.ts b/types/studentHouse.ts
index f8621f7..e2ebbf9 100644
--- a/types/studentHouse.ts
+++ b/types/studentHouse.ts
@@ -1,9 +1,11 @@
 import type { Header } from "~/types/header";
 import type { Room } from "~/types/room";
 import type { Paragraph } from "~/types/paragraph";
+import type { Banner } from "~/types/banner";
 
 export interface StudentHouse {
     header: Header;
     rooms: Room[];
     paragraphs: Paragraph[];
+    banner?: Banner;
 }
\ No newline at end of file