55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import * as React from 'react';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Button from '@mui/material/Button';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
import Stack from '@mui/material/Stack';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import { Image as ImageIcon } from '@phosphor-icons/react/dist/ssr/Image';
|
|
import { Link as LinkIcon } from '@phosphor-icons/react/dist/ssr/Link';
|
|
import { Paperclip as PaperclipIcon } from '@phosphor-icons/react/dist/ssr/Paperclip';
|
|
import { Smiley as SmileyIcon } from '@phosphor-icons/react/dist/ssr/Smiley';
|
|
|
|
import type { User } from '@/types/user';
|
|
|
|
const user = {
|
|
id: 'USR-000',
|
|
name: 'Sofia Rivers',
|
|
avatar: '/assets/avatar.png',
|
|
email: 'sofia@devias.io',
|
|
} satisfies User;
|
|
|
|
export function Reply(): React.JSX.Element {
|
|
return (
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start', flex: '0 0 auto', p: 3 }}>
|
|
<Avatar src={user.avatar} />
|
|
<Stack spacing={2} sx={{ flex: '1 1 auto' }}>
|
|
<OutlinedInput maxRows={7} minRows={3} multiline placeholder="Leave a message" />
|
|
<Stack direction="row" spacing={3} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
|
<Tooltip title="Attach image">
|
|
<IconButton>
|
|
<ImageIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Attach file">
|
|
<IconButton>
|
|
<PaperclipIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<IconButton>
|
|
<LinkIcon />
|
|
</IconButton>
|
|
<IconButton>
|
|
<SmileyIcon />
|
|
</IconButton>
|
|
</Stack>
|
|
<div>
|
|
<Button variant="contained">Reply</Button>
|
|
</div>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|