Outsourced the profile cards into a designated component

src/components/ProfileCardComponent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props =  defineProps({
+  displayName: String,
+  username: String,
+  profilePictureUrl: String,
+  status: String,
+})
+
+const profilePicture = "url("+props.profilePictureUrl+")";
+
+</script>
+
+<template>
+  <div class="profileCard">
+    <div class="profilePicture"></div>
+    <div style="margin-left:10px;">
+      <p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;">
+        <span style="font-weight: bold;font-size: 1.2rem;">{{props.displayName}}</span>
+        @{{props.username}}
+      </p>
+
+      <p style="margin: 0;">{{ props.status }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .profilePicture {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-size: cover;
+    background-position: center;
+    background-image: v-bind('profilePicture');
+  }
+
+  .profileCard {
+    display: flex;
+    border-radius: 10px;
+    padding: 10px;
+    transition: .3s;
+    cursor: pointer;
+  }
+
+  .profileCard:hover {
+    transition: .3s;
+    background: rgba(0,0,0,0.2);
+  }
+</style>