build ok,

002_source/cms/src/components/dashboard/blog/comment-add.tsx

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