Files
nirvana-v4/packages/desktop/src/components/OmniSearchResults.tsx
T

121 lines
3.1 KiB
TypeScript

import {
Avatar,
List,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemSecondaryAction,
ListItemText,
ListSubheader,
Tooltip,
Typography,
} from '@mui/material';
import Conversation from '@nirvana/core/src/models/conversation.model';
import { ConversationRow } from './ConversationList';
import { FiZap } from 'react-icons/fi';
import React from 'react';
import { User } from '@nirvana/core/src/models/user.model';
import useConversations from '../providers/ConversationProvider';
import useTerminal from './Terminal';
export default function OmniSearchResults({
people,
conversations,
}: {
people: User[];
conversations: Conversation[];
}) {
const { handleQuickDial } = useTerminal();
const { selectConversation } = useConversations();
return (
<>
<List
sx={{
pt: 2,
}}
subheader={
<ListSubheader
sx={{
display: 'flex',
justifyContent: 'center',
}}
>
<Typography align={'center'} variant="subtitle2">
People
</Typography>
</ListSubheader>
}
>
<ListItem
sx={{
display: 'flex',
justifyContent: 'center',
}}
>
{people.length === 0 && (
<Typography align="center" variant="caption">
{`Can't find someone? Invite them!`}
</Typography>
)}
</ListItem>
{people.map((person) => (
<Tooltip key={`${person.uid}-searchUsers`} title={'quick dial'}>
<ListItem>
<ListItemButton onClick={() => handleQuickDial(person)}>
<ListItemAvatar>
<Avatar alt={person.displayName} src={person.photoUrl} />
</ListItemAvatar>
<ListItemText primary={person.displayName} secondary={person.email} />
<ListItemSecondaryAction sx={{ color: 'GrayText' }}>
<FiZap />
</ListItemSecondaryAction>
</ListItemButton>
</ListItem>
</Tooltip>
))}
</List>
<List
sx={{
pt: 2,
}}
subheader={
<ListSubheader
sx={{
display: 'flex',
justifyContent: 'center',
}}
>
<Typography align={'center'} variant="subtitle2">
Conversations
</Typography>
</ListSubheader>
}
>
<ListItem
sx={{
display: 'flex',
justifyContent: 'center',
}}
>
{conversations.length === 0 && (
<Typography align="center" variant="caption">
{`Can't find a conversation? Just create one!`}
</Typography>
)}
</ListItem>
{conversations.map((conversation) => (
<Tooltip key={`${conversation.id}-searchConversations`} title={'continue conversation'}>
<ConversationRow conversation={conversation} />
</Tooltip>
))}
</List>
</>
);
}