Add UserInfo component (#100)

* userinfo * fixes
utmgdsc · Oct 11, 2024 · 955a262 · 955a262
1 parent 4c846a0
commit 955a262
Show file tree

Hide file tree

Showing 12 changed files with 547 additions and 413 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/styled-components": "^5.1.34",
     "bootstrap": "^5.3.2",
     "dayjs": "^1.11.11",
     "react": "^18.2.0",
@@ -19,7 +20,8 @@
     "react-drawio": "^0.1.7",
     "react-json-editor-ajrm": "^2.5.14",
     "react-remark": "^2.1.0",
-    "react-router-dom": "^6.21.3"
+    "react-router-dom": "^6.21.3",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

diff --git a/client/src/components/Avatar.tsx b/client/src/components/Avatar.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Image } from 'react-bootstrap';
+
+interface AvatarProps {
+  username: string;
+  size?: number;
+}
+
+const Avatar: React.FC<AvatarProps> = ({ username, size = 40 }) => {
+  return (
+    <Image
+      src={`https://api.dicebear.com/6.x/pixel-art/svg?seed=${username}`}
+      roundedCircle
+      width={size}
+      height={size}
+      alt={`${username}'s avatar`}
+    />
+  );
+};
+
+export default Avatar;