You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.4 KiB
54 lines
1.4 KiB
import { Title, Container, rem, createStyles, TypographyStylesProvider, Image } from '@mantine/core';
|
|
import { Carousel } from '@mantine/carousel';
|
|
import { useLoaderData } from 'react-router-dom';
|
|
import Markdown from 'react-markdown';
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
content: {
|
|
padding: rem(30)
|
|
},
|
|
|
|
title: {
|
|
fontSize: rem(55),
|
|
lineHeight: 1.2,
|
|
fontWeight: 900,
|
|
paddingBottom: rem(20),
|
|
[theme.fn.smallerThan('xs')]: {
|
|
fontSize: rem(28),
|
|
},
|
|
}
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
export function Article() {
|
|
const articleData = useLoaderData();
|
|
const { classes } = useStyles();
|
|
const article = articleData.data[0].attributes
|
|
// console.log(articleData)
|
|
|
|
const generateCarousel = () => {
|
|
if (articleData.data[0].attributes.carousel.data) {
|
|
return (
|
|
<Carousel slideSize="70%" mih={200} mah={500} slideGap="md" loop>
|
|
{articleData.data[0].attributes.carousel.data.map(image => <Carousel.Slide><Image fit='fill' mih={200} mah={500} mx="auto" radius="md" src={`https://strapi.litmusmap.ru${image.attributes.url}`} alt="Random image" /></Carousel.Slide>)}
|
|
</Carousel>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Container className={classes.content}>
|
|
<Title order={1} className={classes.title}>
|
|
{article.title}
|
|
</Title>
|
|
<TypographyStylesProvider>
|
|
<Markdown>{article.content}</Markdown>
|
|
</TypographyStylesProvider>
|
|
{generateCarousel()}
|
|
</Container>
|
|
);
|
|
}
|