Implemented history module

Frontend/src/components/mock/HistoryComponent.vue

@@ -1,8 +1,40 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import HistoryRecords from './HistoryRecords.vue';
+import BodyDetailComponent from './BodyDetailComponent.vue';
+import HeadersDetailComponent from './HeadersDetailComponent.vue';
+
+const shownDetail = ref('none');
+const currentShownData = ref('');
+const currentIndex = ref(-1);
+
+function showBody(body : string, index: number){
+    if( currentIndex.value == index && shownDetail.value == "body" ){
+        shownDetail.value = "none";
+    } else {
+        currentIndex.value = index;
+        shownDetail.value = "body";
+        currentShownData.value = body;
+    }
+}
+
+function showHeaders(headers: object, index: number){
+    if(currentIndex.value == index && shownDetail.value == "headers" ){
+        shownDetail.value = "none";
+    } else {
+        currentIndex.value = index;
+        shownDetail.value = "headers";
+        currentShownData.value = JSON.stringify(headers);
+    }
+}
+
 </script>
 
 
 <template>
-    <HistoryRecords></HistoryRecords>
+    <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
+    <HistoryRecords @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+    <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
+    <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
+    </div>
 </template>