build ok,

002_source/cms/src/components/dashboard/blog/post-form.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
+
+import type { File } from '@/components/core/file-dropzone';
+import { FileDropzone } from '@/components/core/file-dropzone';
+import { TextEditor } from '@/components/core/text-editor/text-editor';
+
+export function PostForm(): React.JSX.Element {
+  const [cover, setCover] = React.useState<string | null>('/assets/image-abstract-1.png');
+
+  const handleCoverDrop = React.useCallback(async ([file]: File[]) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      setCover(reader.result as string);
+    };
+  }, []);
+
+  const handleCoverRemove = React.useCallback(() => {
+    setCover(null);
+  }, []);
+
+  return (
+    <Stack spacing={4}>
+      <Card>
+        <CardContent>
+          <Grid container spacing={3}>
+            <Grid md={4} xs={12}>
+              <Typography variant="h6">Basic details</Typography>
+            </Grid>
+            <Grid md={8} xs={12}>
+              <Stack spacing={3}>
+                <FormControl>
+                  <InputLabel>Post title</InputLabel>
+                  <OutlinedInput name="title" />
+                </FormControl>
+                <FormControl>
+                  <InputLabel>Short description</InputLabel>
+                  <OutlinedInput name="shortDescription" />
+                </FormControl>
+              </Stack>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent>
+          <Grid container spacing={3}>
+            <Grid md={4} xs={12}>
+              <Typography variant="h6">Post cover</Typography>
+            </Grid>
+            <Grid md={8} xs={12}>
+              <Stack spacing={3}>
+                {cover ? (
+                  <Box
+                    sx={{
+                      backgroundImage: `url(${cover})`,
+                      backgroundPosition: 'center',
+                      backgroundSize: 'cover',
+                      borderRadius: 1,
+                      height: '230px',
+                    }}
+                  />
+                ) : (
+                  <Stack
+                    spacing={1}
+                    sx={{
+                      alignItems: 'center',
+                      bgcolor: 'var(--mui-palette-background-level1)',
+                      border: '1px dashed var(--mui-palette-divider)',
+                      borderRadius: 1,
+                      height: '230px',
+                      justifyContent: 'center',
+                      p: 3,
+                      textAlign: 'center',
+                    }}
+                  >
+                    <Typography color="text.secondary" variant="h6">
+                      Photo not uploaded
+                    </Typography>
+                    <Typography color="text.secondary" variant="subtitle1">
+                      Image used for the blog post cover and also for Open Graph meta
+                    </Typography>
+                  </Stack>
+                )}
+                <div>
+                  <Button color="secondary" disabled={!cover} onClick={handleCoverRemove} variant="outlined">
+                    Remove
+                  </Button>
+                </div>
+                <FileDropzone
+                  accept={{ 'image/*': [] }}
+                  caption="(SVG, JPG, PNG, or gif maximum 900x400)"
+                  maxFiles={1}
+                  onDrop={handleCoverDrop}
+                />
+              </Stack>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent>
+          <Grid container spacing={3}>
+            <Grid md={4} xs={12}>
+              <Typography variant="h6">Content</Typography>
+            </Grid>
+            <Grid md={8} xs={12}>
+              <Box sx={{ '& .tiptap-container': { height: '320px' } }}>
+                <TextEditor content="" placeholder="Write something" />
+              </Box>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent>
+          <Grid container spacing={3}>
+            <Grid md={4} xs={12}>
+              <Typography variant="h6">Meta</Typography>
+            </Grid>
+            <Grid lg={8} xs={12}>
+              <Stack spacing={3}>
+                <FormControl>
+                  <InputLabel>SEO title</InputLabel>
+                  <OutlinedInput name="seoTitle" />
+                </FormControl>
+                <FormControl>
+                  <InputLabel>SEO description</InputLabel>
+                  <OutlinedInput name="seoDescription" />
+                </FormControl>
+              </Stack>
+            </Grid>
+          </Grid>
+        </CardContent>
+      </Card>
+    </Stack>
+  );
+}