66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import { marked } from 'marked';
|
|
import { Box, Typography, Divider, IconButton, Chip } from '@mui/material';
|
|
import { styled } from '@mui/material/styles';
|
|
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
|
|
import { ArticleMeta } from "./ArticleMeta";
|
|
import { ArticleProps } from '../types/props';
|
|
|
|
const ArticleContainer = styled(Box)(({ theme }) => ({
|
|
maxWidth: '800px',
|
|
margin: '0 auto',
|
|
padding: theme.spacing(4),
|
|
[theme.breakpoints.down('sm')]: {
|
|
padding: theme.spacing(2),
|
|
},
|
|
}));
|
|
|
|
const CoverImage = styled('img')({
|
|
width: '100%',
|
|
height: 'auto',
|
|
borderRadius: '12px',
|
|
marginTop: '16px',
|
|
marginBottom: '24px',
|
|
});
|
|
|
|
export default function Article({
|
|
article,
|
|
onBack
|
|
}: ArticleProps) {
|
|
|
|
return (
|
|
<ArticleContainer>
|
|
<IconButton onClick={onBack} sx={{ mb: 2 }}>
|
|
<ArrowBackRoundedIcon />
|
|
</IconButton>
|
|
|
|
<Chip
|
|
label={article.tag}
|
|
variant="outlined"
|
|
color="primary"
|
|
sx={{ mb: 2, textTransform: 'uppercase', fontWeight: 500 }}
|
|
/>
|
|
|
|
<Typography variant="h3" component="h1" gutterBottom fontWeight="bold">
|
|
{article.title}
|
|
</Typography>
|
|
|
|
<ArticleMeta article={article} />
|
|
|
|
<Divider sx={{ my: 3 }} />
|
|
|
|
<CoverImage src={article.img} alt={article.title} />
|
|
|
|
<Box
|
|
sx={{
|
|
'& h3': { fontWeight: 600, mt: 4 },
|
|
'& p': { color: 'text.primary', lineHeight: 1.8, mt: 2 },
|
|
'& em': { fontStyle: 'italic' },
|
|
'& ul': { pl: 3 },
|
|
}}
|
|
dangerouslySetInnerHTML={{ __html: marked(article.content) }}
|
|
/>
|
|
</ArticleContainer>
|
|
);
|
|
}
|