* Page for single contract

feature: #9

src/components/tabs/CommentsTab.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="bg-zinc-50">
+    <div class="flex flex-row justify-center py-5">
+      <ul class="justify-around">
+        <li v-for="comment in contract.comments" class="bg-white rounded-lg shadow-2xl mb-4">
+          <div class="relative grid grid-cols-1 gap-4 p-4 mb-8 border rounded-lg bg-white shadow-lg">
+            <div class="relative flex gap-4">
+              <font-awesome-icon icon="fa-solid fa-user-large" class="relative  -mb-4 bg-white  h-11 w-11" />
+              <div class="flex flex-col w-full">
+                <div class="flex flex-row justify-between">
+                  <p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{comment.name}}</p>
+                  <a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
+                </div>
+                <p class="text-gray-400 text-sm">{{new Date(comment.date).toDateString() }}</p>
+              </div>
+            </div>
+            <p class="-mt-4 text-gray-500"> {{comment.message}} </p>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex justify-center">
+
+    <div class="py-4 mb-10 shadow-2xl">
+      <form class="w-full max-w-xl bg-white rounded-lg px-4 pt-2">
+        <div class="flex flex-wrap -mx-3 mb-6">
+          <h2 class="px-4 pt-3 pb-2 text-gray-800 text-lg">Add comment</h2>
+          <div class="w-full md:w-full px-3 mb-2 mt-2">
+            <textarea class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white" name="body" placeholder='Type Your Comment' required></textarea>
+          </div>
+          <div class="w-full md:w-full flex items-start md:w-full px-3">
+            <div class="flex items-start w-1/2 text-gray-700 px-2 mr-auto"></div>
+            <div class="-mr-1">
+              <input type='submit' class="bg-white text-gray-700 font-medium py-1 px-4 border border-gray-400 rounded-lg tracking-wide mr-1 hover:bg-gray-100" value='Post Comment'>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    contract: {
+      type: Object
+    }
+  }
+}
+</script>