add user feature

client/src/Relations/ListElement.tsx

@@ -0,0 +1,5 @@
+function ListElement() {
+    return (
+
+    )
+}

client/src/Relations/Relations.tsx

@@ -0,0 +1,7 @@
+function Relations() {
+    return (
+        <aside className="flex, flex-col, items-center,w-80 bg-amber-600">
+            <button>SWAP</button>
+        </aside>
+    )
+}

client/src/features/users/components/UserBlock.tsx

@@ -0,0 +1,13 @@
+import type {User} from "../types";
+
+function UserBlock(user: User) {
+    return (
+        <div className="w-80">
+            <img className="w-20 h-20 rounded-full" src={user.avatarKey} alt="avatar"/>
+            <div className="flex flex-col">
+                <p className="">{user.name}</p>
+                <p className="text-sm text-gray-600">{user.pronouns}</p>
+            </div>
+        </div>
+    )
+}

client/src/features/users/types.tsx

@@ -0,0 +1,11 @@
+export interface User {
+    id: string;
+    name: string;
+    pronouns: string;
+    description: string;
+    avatarKey?: string;
+    background?: string;
+    createdAt: string;
+    hubs?: string; // TODO
+    color: number[];
+}

client/src/left aside/Relations.tsx

@@ -1,7 +0,0 @@
-function Relations() {
-    return (
-        <aside className="w-80 bg-amber-600">
-
-        </aside>
-    )
-}