added initial state with posts

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Routes, Route} from "react-router-dom";
 import MainPage from "./pages/MainPage";
-import TodoPage from "./pages/TodoPage";
+import BlogPage from "./pages/BlogPage";
 import Layout from "./components/Layout";
 const App: React.FC = () => {
   return (
@@ -10,7 +10,7 @@ const App: React.FC = () => {
         <Routes>
             <Route element={<Layout/>} path={'/'}>
                 <Route element={<MainPage/>} path={''} />
-                <Route element={<TodoPage/>} path={'todo'}/>
+                <Route element={<BlogPage/>} path={'blog'}/>
             </Route>
 
         </Routes>

src/components/Layout.css

@@ -1,18 +1,23 @@
 .mainRoot{
-    background-color: #e7f3ff;
+    /*background-color: #e7f3ff;*/
+    /*height: 100%;*/
+
+    position: absolute;
+    width: 100%;
     height: 100%;
+    background-color: #e7f3ff;
 }
 
 .appMain{
     /*margin: 0 auto;*/
     margin-left: 45px;
     margin-right: 45px;
     display: grid;
-
+    /*height: 1000px;*/
     grid-template-areas:
-  "header header"
-  "main main"
-  "footer footer ";
+  "header header header"
+  "main main main"
+  "footer footer footer ";
 }
 /*HEADER*/
 
@@ -52,8 +57,7 @@ header .logIn a{
 
 .inputMail{
     border: none;
-    /*color: white;*/
-    /*background-color: #5b5ab8;*/
+
     padding: 10px;
     border-radius: 5px;
 }

src/components/Layout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {NavLink, Outlet} from "react-router-dom";
 import  './Layout.css'
+import MyButton from "./UI/button/MyButton";
 const Layout = () => {
     return (
         <div className={'mainRoot'}>
@@ -9,11 +10,11 @@ const Layout = () => {
                     <h1>FlexMess</h1>
                     <nav className={'nav'}>
                         <NavLink to={'/'} >Main page</NavLink>
-                        <NavLink to={'/todo'} >Todos page</NavLink>
+                        <NavLink to={'/blog'} >Blog page</NavLink>
                     </nav>
                     <div className={'logIn'}>
                         <a href="#s">log In</a>
-                        <button value="log In" className="buttonUse">Getting Started</button>
+                        <MyButton  >Getting Started</MyButton>
                     </div>
                 </header>
                 <main className={'container'}>

src/components/Post.css

@@ -0,0 +1,35 @@
+.blogPage{
+    /*display: flex;*/
+    /*justify-content: center;*/
+    width: 100%;
+    margin-left: 30%;
+
+}
+.blogInput{
+    border: 3px solid white;
+    border-radius: 5px;
+    padding: 10px;
+    width: 50%;
+    margin-right: 10px;
+}
+.postsDiv{
+    margin: 5px;
+    margin-top: 20px;
+    width: 60%;
+    font-size: 18px;
+}
+.postItemDiv div{
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 2px solid #5b5ab8;
+    border-radius: 5px;
+    padding: 3px;
+    background-color: rgba(255,255,255,1);
+
+}
+.postsDiv a{
+    color: black;
+    text-decoration: none;
+}

src/components/PostForm.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Post.css'
+import MyButton from "./UI/button/MyButton";
+const PostForm: React.FC = () => {
+    return (
+        <div>
+            <input className={'blogInput'} type="text" placeholder={"Type your post..."}/>
+            <MyButton  >Add Post</MyButton>
+        </div>
+    );
+};
+
+export default PostForm;

src/components/PostItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Link} from "react-router-dom";
+import MyButton from "./UI/button/MyButton";
+
+
+interface PostItemProps{
+    post: any
+}
+const PostItem: React.FC<PostItemProps> = ({post}) => {
+    return (
+        <div className={'postItemDiv'}>
+            <div>
+                <strong>
+                    <Link to={`/blog/${post.id}`}>{ post.id + ' ' + post.title}</Link>
+                </strong>
+
+                <p>{post.body}</p>
+                <MyButton>Удалить</MyButton>
+            </div>
+
+        </div>
+    );
+};
+
+export default PostItem;

src/components/PostList.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PostItem from "./PostItem";
+
+interface PostListProps{
+    posts: Array<any>
+    setPosts: Function
+}
+const PostList: React.FC<PostListProps> = ({posts, setPosts}) => {
+    return (
+        <div className={'postsDiv'}>
+            {posts.map(post => {
+                return <PostItem key={post.id} post={post}/>
+            })}
+        </div>
+    );
+};
+
+export default PostList;

src/components/UI/button/MyButton.module.css

@@ -0,0 +1,10 @@
+/*COMMON*/
+.buttonUse{
+    border: none;
+    color: white;
+    background-color: #5b5ab8;
+
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}

src/components/UI/button/MyButton.tsx

@@ -0,0 +1,16 @@
+import React, {PropsWithChildren} from 'react';
+import cl from './MyButton.module.css'
+
+interface IButton {
+    props?: PropsWithChildren
+    children?: React.ReactNode
+}
+const MyButton: React.FC<IButton> = ({props, children}) => {
+    return (
+        <button className={cl.buttonUse} {...props}>
+            {children}
+        </button>
+    );
+};
+
+export default MyButton;

src/pages/BlogPage.tsx

@@ -0,0 +1,29 @@
+import React, {useState} from 'react';
+import PostForm from "../components/PostForm";
+import  '../components/Post.css'
+import PostList from "../components/PostList";
+const BlogPage: React.FC = () => {
+
+    const [posts, setPosts] = useState([
+        {id: 1, title: 'About me', body: 'My name is Alex, i`m a frontend developer!'},
+        {id: 2, title: 'My skills', body: 'Using html, css, js, react, redux'},
+        {id: 3, title: 'Stage', body: '2 years'},
+    ])
+
+    return (
+        <>
+            <div className={'blogPage'}>
+
+                <PostForm/>
+
+                {/*<hr style={{margin: '15px 0'}}/>*/}
+
+                <PostList posts={posts} setPosts={setPosts}/>
+
+            </div>
+        </>
+
+    );
+};
+
+export default BlogPage;

src/pages/Main.css → src/pages/Main.module.css

@@ -4,13 +4,16 @@ main{
     grid-area: main;
     /*background-color: bisque;*/
     display: flex;
-    height: 1000px;
     justify-content: space-between;
 }
+.mainPage{
+    height: 700px;
+
+}
 main div{
     flex: 1;
 }
-main .right-side{
+main .rightSide{
 
     background-size: contain;
     background-repeat: no-repeat;
@@ -19,24 +22,16 @@ main .right-side{
     margin-right: -30%;
 
 }
-main .left-side {
+main .leftSide {
     padding-top: 10%;
 }
-.left-side-msg p{
+.leftSideMsg p{
     color:#6a6691;
 }
-.left-side-msg h2{
+.leftSideMsg h2{
     color:#fa676d;
 }
-.left-side-msg h2 span{
+.leftSideMsg h2 span{
     color:#2d2c62;
 }
 
-/*COMMON*/
-.buttonUse{
-    border: none;
-    color: white;
-    background-color: #5b5ab8;
-    padding: 10px;
-    border-radius: 5px;
-}

src/pages/MainPage.tsx

@@ -1,22 +1,23 @@
 import React from 'react';
-import './Main.css'
+import st from './Main.module.css'
+import MyButton from "../components/UI/button/MyButton";
 const MainPage: React.FC = () => {
     return (
-        <main>
-            <div className="left-side">
-                <div className="left-side-msg">
+        <main className={st.mainPage}>
+            <div className={st.leftSide}>
+                <div className={st.leftSideMsg}>
                     <h2><span>Grow your media with</span> FlexMess!</h2>
                     <p>This organization is non-profit.</p>
                     <p>All data is protected!</p>
                 </div>
                 <div className="forms">
                     <input className="inputMail" placeholder="Email Adress" type="text" />
-                    <button className="buttonUse">Learn More</button>
+                    <MyButton >Learn More</MyButton>
 
                 </div>
             </div>
 
-            <div className="right-side">
+            <div className={st.rightSide}>
 
             </div>
         </main>