Version 1.0.0 - Initialisation du depot

src/components/UI/User.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="user-card">
+        <Avatar :avatar-url="user?.identity?.avatar" :user-id="user?.identity?.id" />
+         <div class="user-info">
+            <p class="global">{{ user.identity?.global_name || 'Nom d\'affichage inconnu' }}</p>
+            <p class="username">{{ user.identity?.username || 'Identifiant inconnu' }}</p>
+        </div>
+    </div>
+</template>
+<script setup>
+import { defineProps } from 'vue';
+import Avatar from './Avatar.vue';
+const props = defineProps({
+    user: {
+        type: Object,
+        default: () => ({
+            identity: {
+                id: '261175887393718273',
+                username: 'Identifiant inconnu',
+                global_name: 'Nom d\'affichage inconnu',
+                avatar: '96ecebdefe9fb9483b2e1b17a417ba32'
+            }
+        })
+    }
+}); 
+
+</script>
+<style scoped>
+img {
+    border-radius: 100%;
+    width: 50px;
+    height: 50px;
+}
+
+p {
+    margin: 0;
+}
+
+.user-card {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    user-select: none;
+}
+
+.user-info {
+    display: flex;
+    gap: 5px    ;
+    flex-direction: column;
+}
+
+.global {
+    font-size: 15px;
+}
+
+.username {
+    color: var(--text-secondary);
+    font-size: 12px;
+
+}
+</style>