Add docker

src/modules/main/components/recent-news.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect } from 'react';
+
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { observer } from 'mobx-react-lite';
+
+import { useStore } from '../../../shared/hooks/useStore.ts';
+import { formatDate, getDateValue } from '../../news/utils/formatDate.ts';
+
+const RecentNewsComponent: React.FC = () => {
+  const { news } = useStore();
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        await news.fetch({ limit: 10 });
+      } catch {
+        /* errors surfaced via store state */
+      }
+    };
+
+    void load();
+  }, [news]);
+
+  const visibleNews = news.list
+    .slice()
+    .sort((a, b) => getDateValue(b.publishedAt) - getDateValue(a.publishedAt))
+    .slice(0, 3);
+
+  const hasNews = visibleNews.length > 0;
+
+  return (
+    <Container maxWidth="lg">
+      <Box sx={{ display: { xs: 'none', md: 'flex', width: '100%' }, mt: '2rem' }}>
+        <Stack direction="column" spacing={2} sx={{ width: '100%' }}>
+          <Typography component="h2" variant="h2" gutterBottom sx={{ color: 'text.primary', textAlign: 'center' }}>
+            Последние новости
+          </Typography>
+          {news.isLoading && (
+            <Typography sx={{ textAlign: 'center' }} color="text.secondary">
+              Загружаем последние новости...
+            </Typography>
+          )}
+          {news.error && (
+            <Typography sx={{ textAlign: 'center' }} color="error">
+              {news.error}
+            </Typography>
+          )}
+          {hasNews && (
+            <Grid container spacing={2}>
+              {visibleNews.map((item) => (
+                <Grid key={item.id} size={{ xs: 12, md: 6, lg: 4 }}>
+                  <Card
+                    key={item.id}
+                    variant="outlined"
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'space-between',
+                      flexGrow: 1,
+                      height: '100%',
+                    }}
+                  >
+                    <CardHeader title={item.title} subheader={formatDate(item.publishedAt)} />
+                    <CardContent>
+                      <Typography gutterBottom>{item.summary}</Typography>
+                      <Link href={item.href}>Читать полностью</Link>
+                    </CardContent>
+                  </Card>
+                </Grid>
+              ))}
+            </Grid>
+          )}
+          <Link href="/news" sx={{ alignSelf: 'center' }}>
+            Лента новостей
+          </Link>
+        </Stack>
+      </Box>
+    </Container>
+  );
+};
+
+export const RecentNews = observer(RecentNewsComponent);