adding in navbar and other components

2022-06-11 06:06:16 -05:00
parent 8ee5cc0886
commit 11c4ec5a53
10 changed files with 282 additions and 1 deletions
@@ -0,0 +1,77 @@
+import Conversation from '@nirvana/core/models/conversation.model';
+import React from 'react';
+import { Typography } from '@mui/material';
+import User from '@nirvana/core/models/user.model';
+import useAuth from '../providers/AuthProvider';
+
+type IConversationLabel = (
+  | {
+      conversationName?: string;
+      users: User[];
+    }
+  | {
+      conversationName: string;
+      users?: User[];
+    }
+) & { isSelected?: boolean };
+
+/**
+ * if there is a name in the conversation, then return that
+ * if not, then return first three names
+ */
+export default function ConversationLabel({
+  conversationName,
+  users,
+  isSelected = false,
+}: IConversationLabel) {
+  const { user } = useAuth();
+
+  if (conversationName) {
+    return (
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
+        {conversationName}
+      </Typography>
+    );
+  }
+
+  const filteredUsers = users.filter((convoUser) => convoUser._id !== user._id);
+
+  if (filteredUsers.length === 1) {
+    const firstName = filteredUsers[0].name;
+
+    return (
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
+        {firstName}
+      </Typography>
+    );
+  }
+
+  if (filteredUsers.length > 1) {
+    const firstNames = filteredUsers.map((filteredUser) => filteredUser.name);
+
+    const formattedFirstnames = firstNames.slice(0, -1).join(',') + ' and ' + firstNames.slice(-1);
+
+    return (
+      <Typography
+        noWrap
+        variant={'overline'}
+        color={isSelected && 'primary'}
+        sx={{ fontWeight: isSelected && 'bold' }}
+      >
+        {formattedFirstnames}
+      </Typography>
+    );
+  }
+
+  return;
+}
@@ -0,0 +1,27 @@
+import { Box, Paper, Typography } from '@mui/material';
+
+import { KeyboardShortcuts } from '../util/keyboard';
+import React from 'react';
+import { blueGrey } from '@mui/material/colors';
+
+export default function KeyboardShortcutLabel({
+  label,
+}: {
+  label: keyof typeof KeyboardShortcuts;
+}) {
+  return (
+    <Paper
+      elevation={0}
+      variant={'outlined'}
+      sx={{
+        px: 1,
+        py: 0.25,
+        bgcolor: blueGrey[50],
+        color: blueGrey[300],
+        border: 'none',
+      }}
+    >
+      <Typography variant="caption">{label}</Typography>
+    </Paper>
+  );
+}
@@ -0,0 +1,40 @@
+import { Avatar, Box, Stack, Typography } from '@mui/material';
+
+import React from 'react';
+import User from '@nirvana/core/models/user.model';
+
+export default function UserDetailRow({
+  user,
+  rightContent,
+}: {
+  user: User;
+  rightContent?: React.ReactNode;
+}) {
+  return (
+    <Stack
+      direction={'row'}
+      alignItems="center"
+      spacing={1}
+      sx={{
+        px: 1,
+      }}
+    >
+      <Avatar src={user.picture} alt={user.givenName} />
+
+      <Stack>
+        <Typography variant="subtitle2" color="info" gutterBottom={false}>
+          {user.givenName}
+        </Typography>
+        <Typography variant={'overline'}>{user.email}</Typography>
+      </Stack>
+
+      <Box
+        sx={{
+          ml: 'auto',
+        }}
+      >
+        {rightContent}
+      </Box>
+    </Stack>
+  );
+}