Merge pull request #5 from KaraniWachira/dev

feat: added comment section & comment text box and send button

src/components/Comment.jsx

@@ -0,0 +1,22 @@
+import Image from "./Image";
+
+const Comment = () => {
+    return (
+        <div className="p-4 bg-slate-50 rounded-xl mb-8">
+            <div className="flex items-center gap-4 ">
+                <Image src="featured4.jpeg" className="w-10 h-10 rounded-full object-cover" w="40"/>
+                <span className="font-medium">John Doe</span>
+                <span className="text-sm text-gray-500"> 12 days ago</span>
+            </div>
+            <div className="mt-4">
+                <p>
+                    With the support of international organizations, Kenya’s Little League programs are expanding rapidly.
+                    In the coming years, Kenya could see its young players competing at continental and even global levels.
+                    The future of baseball in Kenya looks promising, starting with these young stars.
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default Comment;

src/components/Comments.jsx

@@ -0,0 +1,21 @@
+import Comment from "./Comment";
+
+const Comments = () => {
+    return (
+        <div className="flex flex-col gap-8 lg:w-3/5">
+            <h1 className="text-xl text-gray-500 underline">Comments</h1>
+            <div className="flex items-center justify-between gap-8 w-full">
+                <textarea placeholder="Write a comment..." className="w-full p-4 rounded-xl" />
+                <button className="bg-blue-800 px-4 py-3 text-white font-medium rounded-xl">Send</button>
+            </div>
+            <Comment />
+            <Comment />
+            <Comment />
+            <Comment />
+            <Comment />
+            <Comment />
+        </div>
+    )
+    }
+
+    export default Comments;

src/routes/SinglePostPage.jsx

@@ -2,6 +2,8 @@ import Image from "../components/Image";
 import {Link} from "react-router-dom";
 import PostMenuActions from "../components/PostMenuActions";
 import Search from "../components/Search";
+import Comments from "../components/Comments";
+import {ImMoveUp} from "react-icons/im";
 
 const SinglePostPage = () => {
     return (
@@ -104,9 +106,9 @@ const SinglePostPage = () => {
                     <Search/>
                 </div>
             </div>
+            <Comments />
         </div>
     );
 };
 
-
 export default SinglePostPage