151 lines
5.0 KiB
TypeScript
151 lines
5.0 KiB
TypeScript
'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>
|
|
);
|
|
}
|