Many new

src/components/Main/Main.sass

@@ -0,0 +1,31 @@
+.News
+  background-color: var(--sec-bg-color)
+  padding: .5rem
+
+  &__Title
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    font-size: 1.5rem
+    font-weight: 600
+    margin-bottom: .5rem
+
+  .Post
+    background-color: var(--block-color)
+    padding: .5rem
+
+    &__Title
+      font-size: 1.2rem
+
+    &__Content, &__Title
+      border-bottom: var(--link-color) 1px solid
+
+    &__Footer
+      display: flex
+      justify-content: space-between
+
+    *
+      padding: .2rem
+
+    &:not(:last-child)
+      margin-bottom: 1rem

src/components/Main/Main.tsx

@@ -1,9 +1,13 @@
 import React from "react";
+import News from "./News";
+import './Main.sass';
 
 class Main extends React.Component {
     render() {
         return (
-            <div>В разработке!</div>
+            <div className={'Main'}>
+                <News/>
+            </div>
         );
     }
 }

src/components/Main/News.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {getNews} from "../../api/news";
+import Loading from "../Loading";
+import {Link} from "react-router-dom";
+
+type State = {
+    news: PostType[]
+}
+
+class News extends React.Component<{}, State> {
+    state: State = {
+        news: []
+    };
+
+    componentDidMount() {
+        getNews().then((news: PostType[]) => {
+            news.forEach(p => p.date = new Date(p.date));
+            this.setState({ news })
+        });
+    }
+
+    render() {
+        const { news } = this.state;
+
+        if(news.length === 0) return <Loading/>;
+        return (
+            <div className="News">
+                <div className="News__Title">
+                    <div>Новости</div>
+                    <Link to={'/news'}>Все новости</Link>
+                </div>
+                {news.map(post => (
+                    <div className={'Post'} key={post.id}>
+                        <div className="Post__Title">{post.title}</div>
+                        <div className="Post__Content">{post.short_post}</div>
+                        <div className="Post__Footer">
+                            <div>Автор: {post.author}</div>
+                            <div>Дата: {post.date.toLocaleDateString()}, {post.date.toLocaleTimeString()}</div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+
+export default News;