From 8d7545034f0c3c542fc3926f3be90bf66f30c1f2 Mon Sep 17 00:00:00 2001
From: ErwanDecoster <wanerd2@gmail.com>
Date: Thu, 7 Aug 2025 10:17:47 +0200
Subject: [PATCH] refactor: simplify ImageViewer component props and update
 usage in documentation

---
 src/components/ImageViewer.vue                | 28 ++++++-------------
 .../tooling-and-explorers/iexec-explorer.md   |  4 ---
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
index 67264a57..cc08024c 100644
--- a/src/components/ImageViewer.vue
+++ b/src/components/ImageViewer.vue
@@ -1,46 +1,34 @@
 <template>
-  <div :class="['my-8', { 'text-center': centered }]">
+  <div class="my-8">
     <a :href="linkUrl" target="_blank" rel="noreferrer">
       <img
         :src="imageUrl"
         :alt="imageAlt"
-        :style="{
-          width: '100%',
-          maxWidth: maxWidth,
-          borderRadius: borderRadius,
-          border: '1px solid var(--vp-c-border)',
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-        }"
-        class="transition-transform duration-200 ease-in-out hover:-translate-y-1 hover:shadow-xl"
+        class="border-border w-full rounded-lg border shadow-lg transition-transform duration-200 ease-in-out hover:-translate-y-1 hover:shadow-xl"
       />
     </a>
     <p v-if="caption" class="mt-4 font-medium">
-      <a
+      <Button
         :href="linkUrl"
         target="_blank"
         rel="noreferrer"
-        class="text-primary hover:text-primary2 inline-flex items-center gap-2 no-underline transition-colors duration-200"
+        class="text-primary hover:text-primary2 inline-flex items-center gap-2 rounded-lg no-underline transition-colors duration-200"
       >
         {{ caption }}
-      </a>
+      </Button>
     </p>
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from './ui/Button.vue';
+
 interface Props {
   imageUrl: string;
   imageAlt: string;
   linkUrl: string;
   caption?: string;
-  centered?: boolean;
-  maxWidth?: string;
-  borderRadius?: string;
 }
 
-withDefaults(defineProps<Props>(), {
-  centered: true,
-  maxWidth: '800px',
-  borderRadius: '8px',
-});
+defineProps<Props>();
 </script>
diff --git a/src/overview/tooling-and-explorers/iexec-explorer.md b/src/overview/tooling-and-explorers/iexec-explorer.md
index 831045c6..4f5b80e8 100644
--- a/src/overview/tooling-and-explorers/iexec-explorer.md
+++ b/src/overview/tooling-and-explorers/iexec-explorer.md
@@ -110,8 +110,6 @@ Browse and analyze all tasks across the iExec network:
     image-alt="Result Decryption"
     link-url="https://explorer.iex.ec/bellecour/tasks"
     caption="🔗 Explore Tasks"
-    :centered="true"
-    max-width="700px"
 />
 
 <ImageViewer
@@ -119,8 +117,6 @@ Browse and analyze all tasks across the iExec network:
     image-alt="Task Completed"
     link-url="https://explorer.iex.ec/bellecour/tasks"
     caption="🔗 Explore Tasks"
-    :centered="true"
-    max-width="700px"
 />
 
 > **🔗 Task Assets**: Each task involves four key assets working together: the