From 0250ad92a875933bb91fa3fb4b06c139f8576adc Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 5 May 2024 11:24:14 +0200
Subject: [PATCH] Outsourced the profile cards into a designated component

---
 src/components/ProfileCardComponent.vue | 49 +++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/ProfileCardComponent.vue

diff --git a/src/components/ProfileCardComponent.vue b/src/components/ProfileCardComponent.vue
new file mode 100644
index 0000000..ae08e36
--- /dev/null
+++ b/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>