From 1e3ed9a1e0e5d4405507a8a40c33ccf9d8ffb978 Mon Sep 17 00:00:00 2001
From: Karani Wachira <wachirakeith@gmail.com>
Date: Tue, 7 Jan 2025 12:34:26 +0300
Subject: [PATCH] feat: added comment section & comment text box and send
 button

---
 src/components/Comment.jsx    | 22 ++++++++++++++++++++++
 src/components/Comments.jsx   | 21 +++++++++++++++++++++
 src/routes/SinglePostPage.jsx |  4 +++-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Comment.jsx
 create mode 100644 src/components/Comments.jsx

diff --git a/src/components/Comment.jsx b/src/components/Comment.jsx
new file mode 100644
index 0000000..1deb6cb
--- /dev/null
+++ b/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;
diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
new file mode 100644
index 0000000..ed92940
--- /dev/null
+++ b/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;
diff --git a/src/routes/SinglePostPage.jsx b/src/routes/SinglePostPage.jsx
index 4ca8642..f30dbe4 100644
--- a/src/routes/SinglePostPage.jsx
+++ b/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