Add standalone join message with user badge

2022-08-21 15:50:22 -07:00
parent 1954169ca1
commit 6cc184ea6f
8 changed files with 82 additions and 6 deletions
--- a/web/components/chat/ChatUserBadge/ChatUserBadge.tsx
+++ b/web/components/chat/ChatUserBadge/ChatUserBadge.tsx
@@ -0,0 +1,18 @@
+import s from './ChatUserBadge.module.scss';
+
+interface Props {
+  badge: string;
+  userColor: number;
+}
+
+export default function ChatUserBadge(props: Props) {
+  const { badge, userColor } = props;
+  const color = `var(--theme-user-colors-${userColor})`;
+  const style = { color, borderColor: color };
+
+  return (
+    <span style={style} className={s.badge}>
+      {badge}
+    </span>
+  );
+}