Added Likes and Comments Functionality to Blog Website

components/PostHeaderAuthors.tsx

@@ -3,8 +3,17 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { FaTwitter, FaLinkedin } from "react-icons/fa";
+import BlogReader from "./read-blog";
+import PostComment from "./comment";
+import PostLike from "./like";
 
-const PostHeaderAuthors = ({ blogwriter, blogreviewer, timetoRead }) => {
+const PostHeaderAuthors = ({
+  blogwriter,
+  blogreviewer,
+  timetoRead,
+  content,
+  title,
+}) => {
   var sameAuthor =
     blogwriter[0].name.split(" ")[0].toLowerCase() ===
     blogreviewer[0].name.toLowerCase();
@@ -34,13 +43,18 @@ const PostHeaderAuthors = ({ blogwriter, blogreviewer, timetoRead }) => {
   const currentURL = encodeURIComponent(
     `keploy.io/${router.basePath + router.asPath}`
   );
+
   const twitterShareUrl = `https://twitter.com/share?url=${currentURL}`;
   const linkedinShareUrl = `https://www.linkedin.com/shareArticle?url=${currentURL}`;
 
   return (
     <>
-      <div className="flex flex-row mt-7  items-center justify-around  item z-0">
-        <p className="text-gray-500 justify-self-start text-sm">{timetoRead} min read</p>
+      <div className="flex flex-row mt-7  items-center justify-around item z-0">
+        <div className="flex flex-row gap-10 ">
+          <PostLike />
+          <PostComment />
+        </div>
+        <BlogReader timetoRead={timetoRead} content={content} title={title} />
         <div className="flex flex-row gap-8">
           <div
             className="flex flex-row items-center gap-5 relative"

components/comment.tsx

@@ -0,0 +1,191 @@
+import Image from "next/image";
+import React, { useState } from "react";
+import { FaHeart, FaRegComment, FaRegHeart } from "react-icons/fa";
+
+const PostComment = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [comments, setComments] = useState([
+    {
+      id: 1,
+      user: "User Name",
+      avatar: "/user-placeholder.jpg",
+      content: "This is a sample comment.",
+      likes: 5,
+      date: "2 days ago",
+      showReplyBox: false,
+      replies: [],
+      liked: false,
+    },
+  ]);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const handleLike = (commentId) => {
+    setComments((prevComments) =>
+      prevComments.map((comment) =>
+        comment.id === commentId
+          ? {
+              ...comment,
+              likes: comment.liked ? comment.likes - 1 : comment.likes + 1,
+              liked: !comment.liked,
+            }
+          : comment
+      )
+    );
+  };
+  const toggleReplyBox = (commentId) => {
+    setComments((prevComments) =>
+      prevComments.map((comment) =>
+        comment.id === commentId
+          ? { ...comment, showReplyBox: !comment.showReplyBox }
+          : comment
+      )
+    );
+  };
+
+  const handleReply = (commentId, replyContent) => {
+    setComments((prevComments) =>
+      prevComments.map((comment) =>
+        comment.id === commentId
+          ? {
+              ...comment,
+              replies: [...comment.replies, { content: replyContent }],
+              showReplyBox: false,
+            }
+          : comment
+      )
+    );
+  };
+
+  return (
+    <div>
+      <div
+        className="flex flex-col items-center justify-center cursor-pointer"
+        onClick={toggleMenu}
+      >
+        <p className="text-xl">
+          <FaRegComment />
+        </p>
+        <p className="text-sm text-gray-500">Comment</p>
+      </div>
+
+      <div
+        className={`fixed top-0 right-0 h-full w-[400px] bg-white shadow-lg transform ${
+          isMenuOpen ? "translate-x-0" : "translate-x-full"
+        } transition-transform duration-300 ease-in-out z-30`}
+      >
+        <div className="flex justify-between items-center p-4 border-b">
+          <h2 className="text-lg font-semibold">Responses</h2>
+          <button
+            className="text-gray-600 hover:text-gray-900"
+            onClick={toggleMenu}
+          >
+            &times;
+          </button>
+        </div>
+
+        <div className="m-4 shadow-md rounded-md">
+          <div className="flex items-center space-x-3 px-3 pt-3">
+            <Image
+              src={`https://ui-avatars.com/api/?name=JohnDoe&background=random&size=128`}
+              width={32}
+              height={32}
+              alt="User"
+              className="rounded-full"
+            />
+            <div className="text-sm font-bold">
+              <p>John Doe</p>
+            </div>
+          </div>
+          <textarea
+            placeholder="what is your thoughts?"
+            className="w-full h-[100px] p-3 focus:outline-none placeholder:text-sm text-sm mt-3"
+          />
+          <div className="flex flex-row-reverse p-3">
+            <div className="flex items-center space-x-4">
+              <button className="text-sm">Cancel</button>
+              <button className="text-sm px-4 py-[6px] bg-primary-300 rounded-full text-white">
+                Comment
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="p-4 space-y-4 overflow-y-auto h-[calc(100%-10rem)]">
+          {comments.map((comment) => (
+            <div key={comment.id} className="border-b pb-4">
+              <div className="flex items-center gap-3">
+                <Image
+                  src={`https://ui-avatars.com/api/?name=JohnDoe&background=random&size=128`}
+                  alt={comment.user}
+                  className=" rounded-full"
+                  width={32}
+                  height={32}
+                />
+                <div>
+                  <p className="text-sm font-bold">{comment.user}</p>
+                  <p className="text-xs text-gray-500">{comment.date}</p>
+                </div>
+              </div>
+              <p className="mt-2 text-md text-gray-700">{comment.content}</p>
+              <div className="flex gap-4 text-xs text-gray-500 mt-2">
+                <button
+                  className="flex items-center gap-1"
+                  onClick={() => handleLike(comment.id)}
+                >
+                  {comment.liked ? <FaHeart /> : <FaRegHeart />} {comment.likes}
+                </button>
+                <button
+                  className="flex items-center gap-1"
+                  onClick={() => toggleReplyBox(comment.id)}
+                >
+                  <FaRegComment /> Reply
+                </button>
+              </div>
+              {comment.showReplyBox && (
+                <div className="mt-2 animate-slideDown">
+                  <textarea
+                    placeholder="Reply Here!"
+                    className="w-full h-[30px] p-3 focus:outline-none placeholder:text-sm text-sm mt-2"
+                  />
+                  <div className="flex flex-row-reverse p-3">
+                    <div className="flex items-center space-x-4">
+                      <button
+                        className="text-sm"
+                        onClick={() => toggleReplyBox(comment.id)}
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        className="text-sm px-4 py-[6px] bg-primary-300 rounded-full text-white"
+                        onClick={() =>
+                          handleReply(comment.id, "Sample reply content")
+                        }
+                      >
+                        Reply
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {comment.replies.length > 0 && (
+                <div className="mt-4 pl-6 space-y-2 border-l">
+                  {comment.replies.map((reply, index) => (
+                    <p key={index} className="text-sm text-gray-600">
+                      {reply.content}
+                    </p>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PostComment;

components/like.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { FaHeart, FaRegHeart } from "react-icons/fa";
+
+const PostLike = () => {
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(0);
+
+  const toggleLike = () => {
+    if (liked) {
+      setLiked(false);
+      setLikeCount(likeCount - 1);
+    } else {
+      setLiked(true);
+      setLikeCount(likeCount + 1);
+    }
+  };
+
+  return (
+    <div>
+      {" "}
+      <div
+        className="flex flex-col items-center justify-center cursor-pointer"
+        onClick={toggleLike}
+      >
+        <p className="text-xl">{liked ? <FaHeart /> : <FaRegHeart />}</p>
+        <p className="text-sm text-gray-500">
+          {likeCount} {likeCount === 1 ? "Like" : "Likes"}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PostLike;

components/post-header.tsx

@@ -15,6 +15,7 @@ export default function PostHeader({
   BlogWriter,
   BlogReviewer,
   TimeToRead,
+  content = "",
 }) {
   return (
     <>
@@ -26,10 +27,16 @@ export default function PostHeader({
         <PostTitle>{title}</PostTitle>
         {/* <Avatar author={author} /> */}
         <div className=" w-full">
-        <PostHeaderAuthors blogreviewer={BlogReviewer} blogwriter={BlogWriter} timetoRead={TimeToRead}/>
+          <PostHeaderAuthors
+            blogreviewer={BlogReviewer}
+            blogwriter={BlogWriter}
+            timetoRead={TimeToRead}
+            content={content}
+            title={title}
+          />
         </div>
       </div>
-      
+
       <div className="mb-8 md:mb-16 sm:mx-0 xl:w-2/3 md:w-4/5 w-full md:-translate-x-1/2 md:left-1/2 relative">
         <CoverImage title={title} coverImage={coverImage} />
       </div>

components/read-blog.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from "react";
+import { FaRegPlayCircle } from "react-icons/fa";
+import { FaRegCirclePause } from "react-icons/fa6";
+
+const BlogReader = ({ content, timetoRead, title }) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [speech, setSpeech] = useState(null);
+
+  const stripHTML = (html) => {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+    return tempDiv.textContent || tempDiv.innerText || "";
+  };
+
+  const handlePlay = () => {
+    if (isPlaying) {
+      window.speechSynthesis.cancel();
+      setIsPlaying(false);
+      return;
+    }
+
+    const plainTextContent = stripHTML(content);
+    const filteredContent = plainTextContent.replace(
+      /Table of Contents.*?(?=\n|$)/,
+      ""
+    ); // Remove Table of Contents section
+    const speechText = `${title}. ${filteredContent}`;
+
+    const newSpeech = new SpeechSynthesisUtterance(speechText);
+    newSpeech.lang = "en-US";
+    newSpeech.rate = 1;
+    newSpeech.pitch = 1;
+
+    newSpeech.onend = () => {
+      setIsPlaying(false);
+      setSpeech(null);
+    };
+
+    setIsPlaying(true);
+    setSpeech(newSpeech);
+    window.speechSynthesis.speak(newSpeech);
+  };
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.hidden && isPlaying) {
+        window.speechSynthesis.pause();
+      } else if (!document.hidden && isPlaying) {
+        window.speechSynthesis.resume();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [isPlaying]);
+
+  return (
+    <div className="flex flex-row gap-3 items-center justify-center">
+      <button onClick={handlePlay} className="text-xl">
+        {isPlaying ? <FaRegCirclePause /> : <FaRegPlayCircle />}
+      </button>
+      <p className="text-gray-500 justify-self-start text-sm">
+        {timetoRead} min read
+      </p>
+    </div>
+  );
+};
+
+export default BlogReader;