add UserStatus component

src/components/UserStatus.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { Context } from '../context/context';
+import { User } from '../models/User';
+import { getColorByBrightness } from '../util/ColorUtil';
+import Space from './Space';
+
+export type LayoutMode = "right" | "left";
+
+const UserStatus: FunctionComponent<{
+    context: Context,
+    user: User,
+    layoutMode: LayoutMode,
+    visible?: boolean,
+    style?: React.CSSProperties
+}> = ({ context, user, layoutMode, visible, style }) => {
+    if (!visible) return <></>;
+    const textColorOnBoard = getColorByBrightness(
+        context.themeManager.theme.boardColor,
+        context.themeManager.theme.textColor,
+        context.themeManager.theme.textLightColor
+    );
+    return (
+        <div style={style} className={layoutMode === "right" ? "flex-rtl" : "flex-ltr"}>
+            <span style={{color: textColorOnBoard}} className="material-symbols-outlined icon" >
+                face_6
+            </span>
+            <Space width='5px' />
+            <span style={{color: textColorOnBoard}} className='text'>{user.isAnonymous ? context.texts.Anonymous : user.name}</span>
+            <Space width='5px' />
+            <div className={"circle " + (user.isOnline ? "online" : "offline")}></div>
+            <style jsx>{`
+                .online {
+                    background-color: ${context.themeManager.theme.boardColor};
+                }
+                .offline {
+                    background-color: transparent;
+                }
+                .circle {
+                    width: 15px;
+                    height: 15px;
+                    min-width: 15px;
+                    min-height: 15px;
+                    border-radius: 15px;
+                    border: 2px solid ${context.themeManager.theme.boardColor};
+                }
+                .flex-rtl {
+                    display: flex;
+                    flex-direction: row-reverse;
+                    align-items: center;
+                }
+                .flex-ltr {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
+                .text {
+                    font-weight: bold;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                .icon {
+                    color : "grey";
+                    width: 32px;
+                    height: 32px;
+                    font-size: 32px;
+                }
+            `}</style>
+        </div>
+    );
+}
+
+export default UserStatus;