src/App.jsx

@@ -1,54 +1,21 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import Post from "./components/Post";
-import ActionButtons from "./components/ActionButtons";
-import CommentForm from "./components/CommentForm";
-import CommentsModal from "./components/CommentsModal";
 
 const App = () => {
-  // State declarations
-  const [likes, setLikes] = useState(0);
-  const [comments, setComments] = useState([]);
-  const [newComment, setNewComment] = useState("");
-  const [showComments, setShowComments] = useState(false);
-
-  // Persist likes and comments in localStorage
-  useEffect(() => {
-    localStorage.setItem("likes", likes);
-  }, [likes]);
-
-  useEffect(() => {
-    localStorage.setItem("comments", JSON.stringify(comments));
-  }, [comments]);
-
-  // Handlers
-  const handleLike = () => setLikes((prev) => prev + 1);
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (newComment.trim()) {
-      setComments((prev) => [...prev, { text: newComment }]);
-      setNewComment("");
+  const posts = [
+    {
+      id: 1,
+      user: "John Doe",
+      time: "2 hours ago",
+      content: "This is a sample post content. Implementing concepts of Likes and Comments.",
+      image: "/images/Blog.webp",
     }
-  };
-
+  ];
   return (
     <div className="container mx-auto p-4 bg-white shadow rounded-lg max-w-2xl">
-      <Post />
-      <div className="flex justify-between mb-4 pb-2 border-b">
-        <span>{likes} likes</span>
-        <span>{comments.length} comments</span>
-      </div>
-      <ActionButtons handleLike={handleLike} setShowComments={setShowComments} />
-      <CommentForm
-        newComment={newComment}
-        setNewComment={setNewComment}
-        handleSubmit={handleSubmit}
-      />
-      <CommentsModal
-        showComments={showComments}
-        setShowComments={setShowComments}
-        comments={comments}
-      />
+      {posts.map((post) => (
+        <Post key={post.id} {...post} />
+      ))}
     </div>
   );
 };

src/components/Post.jsx

@@ -1,25 +1,54 @@
-import React from "react";
+import React, { useState } from "react";
+import ActionButtons from "./ActionButtons";
+import CommentForm from "./CommentForm";
+import CommentsModal from "./CommentsModal";
 
-const Post = () => (
-  <div className="mb-4">
-    <div className="flex items-center mb-4">
-      <div className="w-10 h-10 rounded-full bg-gray-200">
-        <img src="/images/logo.webp" alt="User Avatar" />
+const Post = ({ user, time, content, image }) => {
+  const [likes, setLikes] = useState(0);
+  const [comments, setComments] = useState([]);
+  const [newComment, setNewComment] = useState("");
+  const [showComments, setShowComments] = useState(false);
+
+  const handleLike = () => setLikes((prev) => prev + 1);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (newComment.trim()) {
+      setComments((prev) => [...prev, { text: newComment }]);
+      setNewComment("");
+    }
+  };
+
+  return (
+    <div className="mb-6 p-4 bg-white shadow rounded-lg">
+      <div className="flex items-center mb-4">
+        <div className="w-10 h-10 rounded-full bg-gray-200">
+          <img src="/images/logo.webp" alt={`${user}'s Avatar`} />
+        </div>
+        <div className="ml-3">
+          <p className="font-semibold">{user}</p>
+          <p className="text-gray-500 text-sm">{time}</p>
+        </div>
       </div>
-      <div className="ml-3">
-        <p className="font-semibold">John Doe</p>
-        <p className="text-gray-500 text-sm">2 hours ago</p>
+      <p className="text-gray-800 mb-4">{content}</p>
+      {image && <img src={image} alt="Post content" className="w-full rounded-lg mb-4" />}
+      <div className="flex justify-between mb-4 pb-2 border-b">
+        <span>{likes} likes</span>
+        <span>{comments.length} comments</span>
       </div>
+      <ActionButtons handleLike={handleLike} setShowComments={setShowComments} />
+      <CommentForm
+        newComment={newComment}
+        setNewComment={setNewComment}
+        handleSubmit={handleSubmit}
+      />
+      <CommentsModal
+        showComments={showComments}
+        setShowComments={setShowComments}
+        comments={comments}
+      />
     </div>
-    <p className="text-gray-800 mb-4">
-      This is a sample post content. Implementing concepts of Likes and Comments.
-    </p>
-    <img
-      src="/images/Blog.webp"
-      alt="Post content"
-      className="w-full rounded-lg"
-    />
-  </div>
-);
+  );
+};
 
 export default Post;