Added teams button and Avatar component.

src/components/input/TeamsButton.module.css

@@ -0,0 +1,17 @@
+.button {
+  margin-right: 10px;
+}
+
+.menu {
+  background: var(--base50);
+  right: -10px;
+}
+
+.heading {
+  color: var(--base600);
+  font-size: 10px;
+  font-weight: 700;
+  padding: 8px 16px;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--base300);
+}

src/components/input/TeamsButton.tsx

@@ -0,0 +1,51 @@
+import { Key } from 'react';
+import { Text, Icon, Button, Popup, Menu, Item, PopupTrigger, Flexbox } from 'react-basics';
+import Icons from 'components/icons';
+import { useLogin, useMessages, useNavigation } from 'components/hooks';
+import Avatar from 'components/common/Avatar';
+import styles from './TeamsButton.module.css';
+
+export function TeamsButton({ teamId }: { teamId: string }) {
+  const { user } = useLogin();
+  const { formatMessage, labels } = useMessages();
+  const { router } = useNavigation();
+
+  const handleSelect = (close: () => void, id: Key) => {
+    if (id !== user.id) {
+      router.push(`/teams/${id}`);
+    } else {
+      router.push('/');
+    }
+    close();
+  };
+
+  return (
+    <PopupTrigger>
+      <Button className={styles.button}>
+        <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
+        <Text>{teamId ? user.teams.find(({ id }) => id === teamId)?.name : user.username}</Text>
+      </Button>
+      <Popup alignment="end">
+        {close => (
+          <Menu variant="popup" onSelect={handleSelect.bind(null, close)}>
+            <div className={styles.heading}>{formatMessage(labels.myAccount)}</div>
+            <Item key={user.id}>{user.username}</Item>
+            <div className={styles.heading}>{formatMessage(labels.team)}</div>
+            {user.teams.map(({ id, name }) => (
+              <Item key={id}>
+                <Flexbox gap={10} alignItems="center">
+                  <Icon size="md">
+                    <Avatar value={id} />
+                  </Icon>
+                  <Text>{name}</Text>
+                </Flexbox>
+              </Item>
+            ))}
+          </Menu>
+        )}
+      </Popup>
+    </PopupTrigger>
+  );
+}
+
+export default TeamsButton;