feat: add popup image

app/components/VProject.vue

@@ -7,11 +7,20 @@ const props = defineProps<{
 
 const isMediumScreen = useMediaQuery('(min-width: 768px)')
 const descToggled = ref<boolean>(false)
+const popupImageToggled = ref<boolean>(false) 
 
 const hasDescription = computed(() => {
   return props.project.description && props.project.description.length > 0
 })
 
+const hasExternalLink = computed(() => {
+  return Boolean(props.project.toggleUrl)
+})
+
+const hasExtraImage = computed(() => {
+  return Boolean(props.project.popupImage)
+})
+
 function handleToggle() {
   descToggled.value = !descToggled.value
 }
@@ -34,8 +43,18 @@ function handleToggle() {
         <p v-if="descToggled">{{ project.description }}</p>
         <p v-else>{{ project.shortDescription }}</p>
       </div>
+      <a v-if="hasExternalLink" class="trigger-additional" :href="project.toggleUrl" target="_blank" rel="noopener noreferrer">
+        {{ project.toggleText }}
+      </a>
+      <button v-if="hasExtraImage && !popupImageToggled" type="button" class="trigger-additional" @click="popupImageToggled = true">
+        {{ project.toggleText }}
+      </button>
+      <img v-if="popupImageToggled" class="popup-close" src="~/assets/icons/times-bazaar-white.svg" alt="" @click="popupImageToggled = false"  />
     </header>
-    <img :src="project.image" :alt="project.title" />
+    <div class="image-wrap">
+      <img :src="project.image" :alt="project.title" />
+      <img v-if="popupImageToggled" :src="project.popupImage" :alt="project.title" />
+    </div>
   </article>
 </template>
 
@@ -54,6 +73,17 @@ h2 {
   align-items: center;
 }
 
+.image-wrap {
+  position: relative;
+}
+
+.image-wrap img:nth-child(2) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+
 h2 button {
   margin-left: auto;
   background: transparent;
@@ -64,7 +94,7 @@ h2 button img {
   width: 12px;
 }
 
-article > img {
+.image-wrap > img {
   width: 100%;
   margin-bottom: 1rem;
 }
@@ -72,4 +102,31 @@ article > img {
 article header > div {
   padding-left: 1.25rem;
 }
+
+header {
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-close,
+.trigger-additional {
+  cursor: pointer;
+  align-self: flex-end;
+}
+
+.popup-close {
+  width: 28px;
+}
+
+.trigger-additional {
+  font-family: 'Bazaar', sans-serif;
+  background: transparent;
+  color: #FFFFFF;
+  border-radius: 10px;
+  border: 2px solid var(--primary-color);
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  transform: rotate(-2.6deg);
+}
 </style>