From e8c2a4ff54c027fd3fbde7c6910464a9daf37bc0 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Wed, 15 Nov 2023 13:03:57 +0100
Subject: [PATCH] Seperated images to component

---
 Frontend/src/components/man/ImgMan.vue        | 21 ++++++++++++
 .../components/man/RestMockManComponent.vue   | 32 +++++++++----------
 2 files changed, 36 insertions(+), 17 deletions(-)
 create mode 100644 Frontend/src/components/man/ImgMan.vue

diff --git a/Frontend/src/components/man/ImgMan.vue b/Frontend/src/components/man/ImgMan.vue
new file mode 100644
index 0000000..e8cbad3
--- /dev/null
+++ b/Frontend/src/components/man/ImgMan.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+import { ref } from 'vue'
+
+
+
+const props = defineProps(
+    {
+        imgPath: {type: String, required: true},
+        label: {type: String, required: true}
+    }
+)
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-2 w-fit h-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
+        <img id="url_section" class="rounded-md" :src="imgPath" />
+        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">{{ label }}</label>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/man/RestMockManComponent.vue b/Frontend/src/components/man/RestMockManComponent.vue
index c38b925..2795bc1 100644
--- a/Frontend/src/components/man/RestMockManComponent.vue
+++ b/Frontend/src/components/man/RestMockManComponent.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 
+import ImgMan from './ImgMan.vue';
+
 </script>
 
 <template>
@@ -54,26 +56,22 @@ operation   addition
 priority     urgent
 </pre></div>
       <p>In this example we will focus on the left-hand side panel first as it contains most of the settings. On the top you see autogenerated URL link to your REST Mock service and the "Save" button that saves every setting on this page.</p>
-      <div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
-        <img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/URL_section.png" />
-        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Rest Mock URL bar and Save button</label>
-      </div>
+      
+      <ImgMan imgPath="../../src/assets/man/rest-mock/URL_section.png" label="Screenshot of Rest Mock URL bar and Save button"></ImgMan>
+      
       <p>Next, down from REST Mock URL are two text fields. One for content type of a response and second for the HTTP status of a response. </p>
-      <div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
-        <img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Status_section.png" />
-        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of "Response Content Type" and "Response HTTP Status"</label>
-      </div>
-      <p>These two fields are first things that we will set in this example. Out content type is JSON, so we will put "application/json" in "Response Content Type" field. The "Response HTTP Status" field we'll leave unchanged for now.</p><br/>
+      
+      <ImgMan imgPath="../../src/assets/man/rest-mock/Status_section.png" label='Screenshot of "Response Content Type" and "Response HTTP Status"'></ImgMan>
+      
+      <p>These two fields are first things that we will set in this example. Out content type is JSON, so we will put "application/json" in "Response Content Type" field. The "Response HTTP Status" field we'll leave 
+      unchanged for now.</p><br/>
       <p>Next element of this tool is big "Response Body" text field. Here you can put data that you want your REST Mock to respond with. In this example we will put JSON from few lines above.</p>
-      <div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
-        <img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Body_section.png" />
-        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Response Body field filled with example JSON</label>
-      </div>
+      
+      <ImgMan imgPath="../../src/assets/man/rest-mock/Body_section.png" label='Screenshot of Response Body field filled with example JSON'></ImgMan>
+      
       <p>Last thing that we have to set are headers. Those we can set in Headers section.</p>
-      <div class="flex flex-col gap-2 w-fit shadow-sm bg-slate-200 dark:bg-slate-800 p-2 rounded-md my-2 text-center self-center">
-        <img id="url_section" class="rounded-md" src="../../assets/man/rest-mock/Header_section.png" />
-        <label for="url_section" class="text-sm mb-0 text-slate-600 dark:text-slate-300">Screenshot of Headers Section with added custom headers.</label>
-      </div>
+      
+      <ImgMan imgPath="../../src/assets/man/rest-mock/Header_section.png" label='Screenshot of Headers Section with added custom headers.'></ImgMan>
     </div>
   </div>