separate out components

2022-05-29 13:38:17 -05:00
parent 84208b28e0
commit 3f739ef69f
5 changed files with 427 additions and 399 deletions
@@ -0,0 +1,43 @@
+import { Grid, Container, Typography } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+import React from 'react';
+import useAuth from '../providers/AuthProvider';
+import ConversationDetails from './ConversationDetails';
+import useTerminal from './Terminal';
+
+export default function MainPanel() {
+  const { user } = useAuth();
+  const { selectedConversation } = useTerminal();
+
+  // if selected conversation, show details
+  // do all fetching necessary to paint things here
+  // join the call so to speak
+
+  // show who is
+
+  return (
+    <Grid item xs={8} sx={{ backgroundColor: 'white', display: 'flex', flexDirection: 'column' }}>
+      {selectedConversation ? (
+        <ConversationDetails />
+      ) : (
+        <Container
+          maxWidth={false}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 2,
+            flex: 1,
+            background: blueGrey[50],
+          }}
+        >
+          <Typography variant="h6">{`Hi ${
+            user.displayName?.split(' ')[0] ?? 'there'
+          }!`}</Typography>
+          <Typography variant="caption">Take a deep breath in.</Typography>
+        </Container>
+      )}
+    </Grid>
+  );
+}