update,

002_source/cms/src/components/dashboard/teacher/mail/reply.tsx

@@ -0,0 +1,54 @@
+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>
+  );
+}