this.gui 0.0.0 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -0
- package/babel.config.json +3 -0
- package/index.js +0 -0
- package/jsdoc.json +53 -0
- package/package.json +44 -23
- package/tsconfig.json +19 -0
- package/typedoc.json +13 -0
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -38
- package/public/manifest.json +0 -15
- package/src/App.tsx +0 -22
- package/src/components/AvatarWithStatus.tsx +0 -26
- package/src/components/ChatBubble.tsx +0 -135
- package/src/components/ChatListItem.tsx +0 -87
- package/src/components/ChatsPane.tsx +0 -110
- package/src/components/ColorSchemeToggle.tsx +0 -61
- package/src/components/Header.tsx +0 -47
- package/src/components/MessageInput.tsx +0 -97
- package/src/components/MessagesPane.tsx +0 -87
- package/src/components/MessagesPaneHeader.tsx +0 -105
- package/src/components/MuiLogo.tsx +0 -34
- package/src/components/MyMessages.tsx +0 -49
- package/src/components/Sidebar.tsx +0 -320
- package/src/createServiceWorker.js +0 -52
- package/src/data.tsx +0 -272
- package/src/index.tsx +0 -12
- package/src/package.json +0 -22
- package/src/public/index.html +0 -22
- package/src/tsconfig.json +0 -25
- package/src/types.tsx +0 -25
- package/src/useScript.ts +0 -101
- package/src/utils.ts +0 -53
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useColorScheme } from '@mui/joy/styles';
|
|
3
|
-
import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
|
|
4
|
-
|
|
5
|
-
import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
|
|
6
|
-
import LightModeIcon from '@mui/icons-material/LightMode';
|
|
7
|
-
|
|
8
|
-
export default function ColorSchemeToggle({
|
|
9
|
-
onClick,
|
|
10
|
-
sx,
|
|
11
|
-
...props
|
|
12
|
-
}: IconButtonProps) {
|
|
13
|
-
const { mode, setMode } = useColorScheme();
|
|
14
|
-
const [mounted, setMounted] = React.useState(false);
|
|
15
|
-
React.useEffect(() => {
|
|
16
|
-
setMounted(true);
|
|
17
|
-
}, []);
|
|
18
|
-
if (!mounted) {
|
|
19
|
-
return (
|
|
20
|
-
<IconButton
|
|
21
|
-
size="sm"
|
|
22
|
-
variant="outlined"
|
|
23
|
-
color="neutral"
|
|
24
|
-
{...props}
|
|
25
|
-
sx={sx}
|
|
26
|
-
disabled
|
|
27
|
-
/>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
return (
|
|
31
|
-
<IconButton
|
|
32
|
-
id="toggle-mode"
|
|
33
|
-
size="sm"
|
|
34
|
-
variant="outlined"
|
|
35
|
-
color="neutral"
|
|
36
|
-
{...props}
|
|
37
|
-
onClick={(event) => {
|
|
38
|
-
if (mode === 'light') {
|
|
39
|
-
setMode('dark');
|
|
40
|
-
} else {
|
|
41
|
-
setMode('light');
|
|
42
|
-
}
|
|
43
|
-
onClick?.(event);
|
|
44
|
-
}}
|
|
45
|
-
sx={[
|
|
46
|
-
{
|
|
47
|
-
'& > *:first-of-type': {
|
|
48
|
-
display: mode === 'dark' ? 'none' : 'initial',
|
|
49
|
-
},
|
|
50
|
-
'& > *:last-of-type': {
|
|
51
|
-
display: mode === 'light' ? 'none' : 'initial',
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
...(Array.isArray(sx) ? sx : [sx]),
|
|
55
|
-
]}
|
|
56
|
-
>
|
|
57
|
-
<DarkModeRoundedIcon />
|
|
58
|
-
<LightModeIcon />
|
|
59
|
-
</IconButton>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import GlobalStyles from '@mui/joy/GlobalStyles';
|
|
3
|
-
import IconButton from '@mui/joy/IconButton';
|
|
4
|
-
import Sheet from '@mui/joy/Sheet';
|
|
5
|
-
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
|
|
6
|
-
import { toggleSidebar } from '../utils';
|
|
7
|
-
|
|
8
|
-
export default function Header() {
|
|
9
|
-
return (
|
|
10
|
-
<Sheet
|
|
11
|
-
sx={{
|
|
12
|
-
display: { xs: 'flex', sm: 'none' },
|
|
13
|
-
alignItems: 'center',
|
|
14
|
-
justifyContent: 'space-between',
|
|
15
|
-
position: 'fixed',
|
|
16
|
-
top: 0,
|
|
17
|
-
width: '100vw',
|
|
18
|
-
height: 'var(--Header-height)',
|
|
19
|
-
zIndex: 9995,
|
|
20
|
-
p: 2,
|
|
21
|
-
gap: 1,
|
|
22
|
-
borderBottom: '1px solid',
|
|
23
|
-
borderColor: 'background.level1',
|
|
24
|
-
boxShadow: 'sm',
|
|
25
|
-
}}
|
|
26
|
-
>
|
|
27
|
-
<GlobalStyles
|
|
28
|
-
styles={(theme) => ({
|
|
29
|
-
':root': {
|
|
30
|
-
'--Header-height': '52px',
|
|
31
|
-
[theme.breakpoints.up('lg')]: {
|
|
32
|
-
'--Header-height': '0px',
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
})}
|
|
36
|
-
/>
|
|
37
|
-
<IconButton
|
|
38
|
-
onClick={() => toggleSidebar()}
|
|
39
|
-
variant="outlined"
|
|
40
|
-
color="neutral"
|
|
41
|
-
size="sm"
|
|
42
|
-
>
|
|
43
|
-
<MenuRoundedIcon />
|
|
44
|
-
</IconButton>
|
|
45
|
-
</Sheet>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import Box from '@mui/joy/Box';
|
|
3
|
-
import Button from '@mui/joy/Button';
|
|
4
|
-
import FormControl from '@mui/joy/FormControl';
|
|
5
|
-
import Textarea from '@mui/joy/Textarea';
|
|
6
|
-
import { IconButton, Stack } from '@mui/joy';
|
|
7
|
-
|
|
8
|
-
import FormatBoldRoundedIcon from '@mui/icons-material/FormatBoldRounded';
|
|
9
|
-
import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
|
|
10
|
-
import StrikethroughSRoundedIcon from '@mui/icons-material/StrikethroughSRounded';
|
|
11
|
-
import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
|
|
12
|
-
import SendRoundedIcon from '@mui/icons-material/SendRounded';
|
|
13
|
-
|
|
14
|
-
export type MessageInputProps = {
|
|
15
|
-
textAreaValue: string;
|
|
16
|
-
setTextAreaValue: (value: string) => void;
|
|
17
|
-
onSubmit: () => void;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export default function MessageInput({
|
|
21
|
-
textAreaValue,
|
|
22
|
-
setTextAreaValue,
|
|
23
|
-
onSubmit,
|
|
24
|
-
}: MessageInputProps) {
|
|
25
|
-
const textAreaRef = React.useRef<HTMLDivElement>(null);
|
|
26
|
-
const handleClick = () => {
|
|
27
|
-
if (textAreaValue.trim() !== '') {
|
|
28
|
-
onSubmit();
|
|
29
|
-
setTextAreaValue('');
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
return (
|
|
33
|
-
<Box sx={{ px: 2, pb: 3 }}>
|
|
34
|
-
<FormControl>
|
|
35
|
-
<Textarea
|
|
36
|
-
placeholder="Type something here…"
|
|
37
|
-
aria-label="Message"
|
|
38
|
-
ref={textAreaRef}
|
|
39
|
-
onChange={(e) => {
|
|
40
|
-
setTextAreaValue(e.target.value);
|
|
41
|
-
}}
|
|
42
|
-
value={textAreaValue}
|
|
43
|
-
minRows={3}
|
|
44
|
-
maxRows={10}
|
|
45
|
-
endDecorator={
|
|
46
|
-
<Stack
|
|
47
|
-
direction="row"
|
|
48
|
-
justifyContent="space-between"
|
|
49
|
-
alignItems="center"
|
|
50
|
-
flexGrow={1}
|
|
51
|
-
sx={{
|
|
52
|
-
py: 1,
|
|
53
|
-
pr: 1,
|
|
54
|
-
borderTop: '1px solid',
|
|
55
|
-
borderColor: 'divider',
|
|
56
|
-
}}
|
|
57
|
-
>
|
|
58
|
-
<div>
|
|
59
|
-
<IconButton size="sm" variant="plain" color="neutral">
|
|
60
|
-
<FormatBoldRoundedIcon />
|
|
61
|
-
</IconButton>
|
|
62
|
-
<IconButton size="sm" variant="plain" color="neutral">
|
|
63
|
-
<FormatItalicRoundedIcon />
|
|
64
|
-
</IconButton>
|
|
65
|
-
<IconButton size="sm" variant="plain" color="neutral">
|
|
66
|
-
<StrikethroughSRoundedIcon />
|
|
67
|
-
</IconButton>
|
|
68
|
-
<IconButton size="sm" variant="plain" color="neutral">
|
|
69
|
-
<FormatListBulletedRoundedIcon />
|
|
70
|
-
</IconButton>
|
|
71
|
-
</div>
|
|
72
|
-
<Button
|
|
73
|
-
size="sm"
|
|
74
|
-
color="primary"
|
|
75
|
-
sx={{ alignSelf: 'center', borderRadius: 'sm' }}
|
|
76
|
-
endDecorator={<SendRoundedIcon />}
|
|
77
|
-
onClick={handleClick}
|
|
78
|
-
>
|
|
79
|
-
Send
|
|
80
|
-
</Button>
|
|
81
|
-
</Stack>
|
|
82
|
-
}
|
|
83
|
-
onKeyDown={(event) => {
|
|
84
|
-
if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
|
|
85
|
-
handleClick();
|
|
86
|
-
}
|
|
87
|
-
}}
|
|
88
|
-
sx={{
|
|
89
|
-
'& textarea:first-of-type': {
|
|
90
|
-
minHeight: 72,
|
|
91
|
-
},
|
|
92
|
-
}}
|
|
93
|
-
/>
|
|
94
|
-
</FormControl>
|
|
95
|
-
</Box>
|
|
96
|
-
);
|
|
97
|
-
}
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import Box from '@mui/joy/Box';
|
|
3
|
-
import Sheet from '@mui/joy/Sheet';
|
|
4
|
-
import Stack from '@mui/joy/Stack';
|
|
5
|
-
import AvatarWithStatus from './AvatarWithStatus';
|
|
6
|
-
import ChatBubble from './ChatBubble';
|
|
7
|
-
import MessageInput from './MessageInput';
|
|
8
|
-
import MessagesPaneHeader from './MessagesPaneHeader';
|
|
9
|
-
import { ChatProps, MessageProps } from '../types';
|
|
10
|
-
|
|
11
|
-
type MessagesPaneProps = {
|
|
12
|
-
chat: ChatProps;
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export default function MessagesPane({ chat }: MessagesPaneProps) {
|
|
16
|
-
const [chatMessages, setChatMessages] = React.useState(chat.messages);
|
|
17
|
-
const [textAreaValue, setTextAreaValue] = React.useState('');
|
|
18
|
-
|
|
19
|
-
React.useEffect(() => {
|
|
20
|
-
setChatMessages(chat.messages);
|
|
21
|
-
}, [chat.messages]);
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<Sheet
|
|
25
|
-
sx={{
|
|
26
|
-
height: { xs: 'calc(100dvh - var(--Header-height))', lg: '100dvh' },
|
|
27
|
-
display: 'flex',
|
|
28
|
-
flexDirection: 'column',
|
|
29
|
-
backgroundColor: 'background.level1',
|
|
30
|
-
}}
|
|
31
|
-
>
|
|
32
|
-
<MessagesPaneHeader sender={chat.sender} />
|
|
33
|
-
|
|
34
|
-
<Box
|
|
35
|
-
sx={{
|
|
36
|
-
display: 'flex',
|
|
37
|
-
flex: 1,
|
|
38
|
-
minHeight: 0,
|
|
39
|
-
px: 2,
|
|
40
|
-
py: 3,
|
|
41
|
-
overflowY: 'scroll',
|
|
42
|
-
flexDirection: 'column-reverse',
|
|
43
|
-
}}
|
|
44
|
-
>
|
|
45
|
-
<Stack spacing={2} justifyContent="flex-end">
|
|
46
|
-
{chatMessages.map((message: MessageProps, index: number) => {
|
|
47
|
-
const isYou = message.sender === 'You';
|
|
48
|
-
return (
|
|
49
|
-
<Stack
|
|
50
|
-
key={index}
|
|
51
|
-
direction="row"
|
|
52
|
-
spacing={2}
|
|
53
|
-
flexDirection={isYou ? 'row-reverse' : 'row'}
|
|
54
|
-
>
|
|
55
|
-
{message.sender !== 'You' && (
|
|
56
|
-
<AvatarWithStatus
|
|
57
|
-
online={message.sender.online}
|
|
58
|
-
src={message.sender.avatar}
|
|
59
|
-
/>
|
|
60
|
-
)}
|
|
61
|
-
<ChatBubble variant={isYou ? 'sent' : 'received'} {...message} />
|
|
62
|
-
</Stack>
|
|
63
|
-
);
|
|
64
|
-
})}
|
|
65
|
-
</Stack>
|
|
66
|
-
</Box>
|
|
67
|
-
|
|
68
|
-
<MessageInput
|
|
69
|
-
textAreaValue={textAreaValue}
|
|
70
|
-
setTextAreaValue={setTextAreaValue}
|
|
71
|
-
onSubmit={() => {
|
|
72
|
-
const newId = chatMessages.length + 1;
|
|
73
|
-
const newIdString = newId.toString();
|
|
74
|
-
setChatMessages([
|
|
75
|
-
...chatMessages,
|
|
76
|
-
{
|
|
77
|
-
id: newIdString,
|
|
78
|
-
sender: 'You',
|
|
79
|
-
content: textAreaValue,
|
|
80
|
-
timestamp: 'Just now',
|
|
81
|
-
},
|
|
82
|
-
]);
|
|
83
|
-
}}
|
|
84
|
-
/>
|
|
85
|
-
</Sheet>
|
|
86
|
-
);
|
|
87
|
-
}
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import Avatar from '@mui/joy/Avatar';
|
|
3
|
-
import Button from '@mui/joy/Button';
|
|
4
|
-
import Chip from '@mui/joy/Chip';
|
|
5
|
-
import IconButton from '@mui/joy/IconButton';
|
|
6
|
-
import Stack from '@mui/joy/Stack';
|
|
7
|
-
import Typography from '@mui/joy/Typography';
|
|
8
|
-
import CircleIcon from '@mui/icons-material/Circle';
|
|
9
|
-
import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';
|
|
10
|
-
import PhoneInTalkRoundedIcon from '@mui/icons-material/PhoneInTalkRounded';
|
|
11
|
-
import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
|
|
12
|
-
import { UserProps } from '../types';
|
|
13
|
-
import { toggleMessagesPane } from '../utils';
|
|
14
|
-
|
|
15
|
-
type MessagesPaneHeaderProps = {
|
|
16
|
-
sender: UserProps;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export default function MessagesPaneHeader({ sender }: MessagesPaneHeaderProps) {
|
|
20
|
-
return (
|
|
21
|
-
<Stack
|
|
22
|
-
direction="row"
|
|
23
|
-
justifyContent="space-between"
|
|
24
|
-
sx={{
|
|
25
|
-
borderBottom: '1px solid',
|
|
26
|
-
borderColor: 'divider',
|
|
27
|
-
backgroundColor: 'background.body',
|
|
28
|
-
}}
|
|
29
|
-
py={{ xs: 2, md: 2 }}
|
|
30
|
-
px={{ xs: 1, md: 2 }}
|
|
31
|
-
>
|
|
32
|
-
<Stack direction="row" spacing={{ xs: 1, md: 2 }} alignItems="center">
|
|
33
|
-
<IconButton
|
|
34
|
-
variant="plain"
|
|
35
|
-
color="neutral"
|
|
36
|
-
size="sm"
|
|
37
|
-
sx={{
|
|
38
|
-
display: { xs: 'inline-flex', sm: 'none' },
|
|
39
|
-
}}
|
|
40
|
-
onClick={() => toggleMessagesPane()}
|
|
41
|
-
>
|
|
42
|
-
<ArrowBackIosNewRoundedIcon />
|
|
43
|
-
</IconButton>
|
|
44
|
-
<Avatar size="lg" src={sender.avatar} />
|
|
45
|
-
<div>
|
|
46
|
-
<Typography
|
|
47
|
-
fontWeight="lg"
|
|
48
|
-
fontSize="lg"
|
|
49
|
-
component="h2"
|
|
50
|
-
noWrap
|
|
51
|
-
endDecorator={
|
|
52
|
-
sender.online ? (
|
|
53
|
-
<Chip
|
|
54
|
-
variant="outlined"
|
|
55
|
-
size="sm"
|
|
56
|
-
color="neutral"
|
|
57
|
-
sx={{
|
|
58
|
-
borderRadius: 'sm',
|
|
59
|
-
}}
|
|
60
|
-
startDecorator={
|
|
61
|
-
<CircleIcon sx={{ fontSize: 8 }} color="success" />
|
|
62
|
-
}
|
|
63
|
-
slotProps={{ root: { component: 'span' } }}
|
|
64
|
-
>
|
|
65
|
-
Online
|
|
66
|
-
</Chip>
|
|
67
|
-
) : undefined
|
|
68
|
-
}
|
|
69
|
-
>
|
|
70
|
-
{sender.name}
|
|
71
|
-
</Typography>
|
|
72
|
-
|
|
73
|
-
<Typography level="body-sm">{sender.username}</Typography>
|
|
74
|
-
</div>
|
|
75
|
-
</Stack>
|
|
76
|
-
<Stack spacing={1} direction="row" alignItems="center">
|
|
77
|
-
<Button
|
|
78
|
-
startDecorator={<PhoneInTalkRoundedIcon />}
|
|
79
|
-
color="neutral"
|
|
80
|
-
variant="outlined"
|
|
81
|
-
size="sm"
|
|
82
|
-
sx={{
|
|
83
|
-
display: { xs: 'none', md: 'inline-flex' },
|
|
84
|
-
}}
|
|
85
|
-
>
|
|
86
|
-
Call
|
|
87
|
-
</Button>
|
|
88
|
-
<Button
|
|
89
|
-
color="neutral"
|
|
90
|
-
variant="outlined"
|
|
91
|
-
size="sm"
|
|
92
|
-
sx={{
|
|
93
|
-
display: { xs: 'none', md: 'inline-flex' },
|
|
94
|
-
}}
|
|
95
|
-
>
|
|
96
|
-
View profile
|
|
97
|
-
</Button>
|
|
98
|
-
|
|
99
|
-
<IconButton size="sm" variant="plain" color="neutral">
|
|
100
|
-
<MoreVertRoundedIcon />
|
|
101
|
-
</IconButton>
|
|
102
|
-
</Stack>
|
|
103
|
-
</Stack>
|
|
104
|
-
);
|
|
105
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import AspectRatio, { AspectRatioProps } from '@mui/joy/AspectRatio';
|
|
3
|
-
|
|
4
|
-
export default function MuiLogo({ sx, ...props }: AspectRatioProps) {
|
|
5
|
-
return (
|
|
6
|
-
<AspectRatio
|
|
7
|
-
ratio="1"
|
|
8
|
-
variant="plain"
|
|
9
|
-
{...props}
|
|
10
|
-
sx={[
|
|
11
|
-
{
|
|
12
|
-
width: 36,
|
|
13
|
-
borderRadius: 'sm',
|
|
14
|
-
},
|
|
15
|
-
...(Array.isArray(sx) ? sx : [sx]),
|
|
16
|
-
]}
|
|
17
|
-
>
|
|
18
|
-
<div>
|
|
19
|
-
<svg
|
|
20
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
21
|
-
width="24"
|
|
22
|
-
height="20"
|
|
23
|
-
viewBox="0 0 36 32"
|
|
24
|
-
fill="none"
|
|
25
|
-
>
|
|
26
|
-
<path
|
|
27
|
-
d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z"
|
|
28
|
-
fill="#007FFF"
|
|
29
|
-
/>
|
|
30
|
-
</svg>
|
|
31
|
-
</div>
|
|
32
|
-
</AspectRatio>
|
|
33
|
-
);
|
|
34
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import Sheet from '@mui/joy/Sheet';
|
|
3
|
-
import MessagesPane from './MessagesPane';
|
|
4
|
-
import ChatsPane from './ChatsPane';
|
|
5
|
-
import { ChatProps } from '../types';
|
|
6
|
-
import { chats } from '../data';
|
|
7
|
-
|
|
8
|
-
export default function MyProfile() {
|
|
9
|
-
const [selectedChat, setSelectedChat] = React.useState<ChatProps>(chats[0]);
|
|
10
|
-
return (
|
|
11
|
-
<Sheet
|
|
12
|
-
sx={{
|
|
13
|
-
flex: 1,
|
|
14
|
-
width: '100%',
|
|
15
|
-
mx: 'auto',
|
|
16
|
-
pt: { xs: 'var(--Header-height)', sm: 0 },
|
|
17
|
-
display: 'grid',
|
|
18
|
-
gridTemplateColumns: {
|
|
19
|
-
xs: '1fr',
|
|
20
|
-
sm: 'minmax(min-content, min(30%, 400px)) 1fr',
|
|
21
|
-
},
|
|
22
|
-
}}
|
|
23
|
-
>
|
|
24
|
-
<Sheet
|
|
25
|
-
sx={{
|
|
26
|
-
position: {
|
|
27
|
-
xs: 'fixed',
|
|
28
|
-
sm: 'sticky',
|
|
29
|
-
},
|
|
30
|
-
transform: {
|
|
31
|
-
xs: 'translateX(calc(100% * (var(--MessagesPane-slideIn, 0) - 1)))',
|
|
32
|
-
sm: 'none',
|
|
33
|
-
},
|
|
34
|
-
transition: 'transform 0.4s, width 0.4s',
|
|
35
|
-
zIndex: 100,
|
|
36
|
-
width: '100%',
|
|
37
|
-
top: 52,
|
|
38
|
-
}}
|
|
39
|
-
>
|
|
40
|
-
<ChatsPane
|
|
41
|
-
chats={chats}
|
|
42
|
-
selectedChatId={selectedChat.id}
|
|
43
|
-
setSelectedChat={setSelectedChat}
|
|
44
|
-
/>
|
|
45
|
-
</Sheet>
|
|
46
|
-
<MessagesPane chat={selectedChat} />
|
|
47
|
-
</Sheet>
|
|
48
|
-
);
|
|
49
|
-
}
|