# 15 Add basic post

src/pages/posts/PostPage.js

@@ -7,32 +7,33 @@ import Container from "react-bootstrap/Container";
 import appStyles from "../../App.module.css";
 import { useParams } from "react-router-dom";
 import { axiosReq } from "../../api/axiosDefaults";
+import Post from "./Post";
 
 function PostPage() {
-    const { id } = useParams();
-    const [post, setPost] = useState({ results: [] });
-  
-    useEffect(() => {
-      const handleMount = async () => {
-        try {
-          const [{ data: post }] = await Promise.all([
-            axiosReq.get(`/posts/${id}`),
-          ]);
-          setPost({ results: [post] });
-          console.log(post);
-        } catch (err) {
-          console.log(err);
-        }
-      };
-  
-      handleMount();
-    }, [id]);
+  const { id } = useParams();
+  const [post, setPost] = useState({ results: [] });
+
+  useEffect(() => {
+    const handleMount = async () => {
+      try {
+        const [{ data: post }] = await Promise.all([
+          axiosReq.get(`/posts/${id}`),
+        ]);
+        setPost({ results: [post] });
+        console.log(post);
+      } catch (err) {
+        console.log(err);
+      }
+    };
+
+    handleMount();
+  }, [id]);
 
   return (
     <Row className="h-100">
       <Col className="py-2 p-0 p-lg-2" lg={8}>
         <p>Popular profiles for mobile</p>
-        <p>Post component</p>
+        <Post {...post.results[0]} setPosts={setPost} postPage />
         <Container className={appStyles.Content}>Comments</Container>
       </Col>
       <Col lg={4} className="d-none d-lg-block p-0 p-lg-2">

src/styles/Post.module.css

@@ -0,0 +1,24 @@
+.Post {
+    background-color: #ffffff;
+    border: 1px solid #dadadf;
+    border-radius: 2px;
+    margin-bottom: 16px;
+    text-align: center;
+  }
+
+  .Post figure,
+  h5 {
+    margin: 0 0;
+  }
+
+  .Heart {
+    color: #f85032;
+  }
+
+  .Heart:hover {
+    color: #2142b2;
+  }
+
+  .HeartOutline:hover {
+    color: #f85032;
+  }