Added Frontend

frontend/components/InboxMail.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { format, isToday } from 'date-fns'
+
+defineProps({
+  mail: {
+    type: Object,
+    required: true
+  },
+  selected: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <UDashboardPanelContent>
+    <div class="flex justify-between">
+      <div class="flex items-center gap-4">
+        <UAvatar v-bind="mail.from.avatar" :alt="mail.from.name" size="lg" />
+
+        <div class="min-w-0">
+          <p class="text-gray-900 dark:text-white font-semibold">
+            {{ mail.from.name }}
+          </p>
+          <p class="text-gray-500 dark:text-gray-400 font-medium">
+            {{ mail.subject }}
+          </p>
+        </div>
+      </div>
+
+      <p class="font-medium text-gray-900 dark:text-white">
+        {{ isToday(new Date(mail.date)) ? format(new Date(mail.date), 'HH:mm') : format(new Date(mail.date), 'dd MMM') }}
+      </p>
+    </div>
+
+    <UDivider class="my-5" />
+
+    <div class="flex-1">
+      <p class="text-lg">
+        {{ mail.body }}
+      </p>
+    </div>
+
+    <UDivider class="my-5" />
+
+    <form @submit.prevent>
+      <UTextarea color="gray" required size="xl" :rows="5" :placeholder="`Reply to ${mail.from.name}`">
+        <UButton type="submit" color="black" label="Send" icon="i-heroicons-paper-airplane" class="absolute bottom-2.5 right-3.5" />
+      </UTextarea>
+    </form>
+  </UDashboardPanelContent>
+</template>