Post.jsを作成しよう

src/components/timeline/Post.jsx

@@ -0,0 +1,40 @@
+import {
+  ChatBubbleOutline,
+  FavoriteBorder,
+  PublishOutlined,
+  Repeat,
+  VerifiedUser,
+} from "@mui/icons-material";
+import { Avatar } from "@mui/material";
+import React from "react";
+
+const Post = () => {
+  return (
+    <div className="post">
+      <div className="post__avatar">
+        <Avatar src="" />
+      </div>
+      <div className="post__body">
+        <div className="post__header">
+          <h3 className="post__headerText">プログラミングチュートリアル</h3>
+          <div className="post__headerSpecial">
+            <VerifiedUser className="post__badge" />
+            @name
+          </div>
+          <div className="post__headerDiscription">
+            <p>テキストテキストテキスト</p>
+          </div>
+        </div>
+      </div>
+      <img src="https://source.unsplash.com/random/" alt="" />
+      <div className="post__footer">
+        <ChatBubbleOutline fontSize="small" />
+        <Repeat fontSize="small" />
+        <FavoriteBorder fontSize="small" />
+        <PublishOutlined fontSize="small" />
+      </div>
+    </div>
+  );
+};
+
+export default Post;

src/components/timeline/Timeline.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Post from "./Post";
 import "./Timeline.scss";
 import TweetBox from "./TweetBox";
 const Timeline = () => {
@@ -9,7 +10,7 @@ const Timeline = () => {
         <h2>ホーム</h2>
       </div>
       <TweetBox />
-      {/* Post */}
+      <Post />
     </div>
   );
 };