53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
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',
|
|
maxHeight: '100vh',
|
|
}}
|
|
>
|
|
{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>
|
|
);
|
|
}
|