70 lines
2.0 KiB
TypeScript
70 lines
2.0 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 { Image as ImageIcon } from '@phosphor-icons/react/dist/ssr/Image';
|
|
import { Paperclip as PaperclipIcon } from '@phosphor-icons/react/dist/ssr/Paperclip';
|
|
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
|
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',
|
|
collectionId: '123321',
|
|
} satisfies User;
|
|
|
|
export function CommentAdd(): React.JSX.Element {
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
sx={{ alignItems: 'flex-start' }}
|
|
>
|
|
<Avatar src={user.avatar} />
|
|
<Stack
|
|
spacing={3}
|
|
sx={{ flex: '1 1 auto' }}
|
|
>
|
|
<OutlinedInput
|
|
multiline
|
|
placeholder="Add a comment"
|
|
rows={3}
|
|
/>
|
|
<Stack
|
|
direction="row"
|
|
spacing={3}
|
|
sx={{ alignItems: 'center', justifyContent: 'space-between' }}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
spacing={1}
|
|
sx={{ alignItems: 'center' }}
|
|
>
|
|
<IconButton sx={{ display: { sm: 'none' } }}>
|
|
<PlusIcon />
|
|
</IconButton>
|
|
<IconButton sx={{ display: { xs: 'none', sm: 'inline-flex' } }}>
|
|
<ImageIcon />
|
|
</IconButton>
|
|
<IconButton sx={{ display: { xs: 'none', sm: 'inline-flex' } }}>
|
|
<PaperclipIcon />
|
|
</IconButton>
|
|
<IconButton sx={{ display: { xs: 'none', sm: 'inline-flex' } }}>
|
|
<SmileyIcon />
|
|
</IconButton>
|
|
</Stack>
|
|
<div>
|
|
<Button variant="contained">Send</Button>
|
|
</div>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|