Changes done

src/App.jsx

@@ -5,17 +5,56 @@ const App = () => {
   const posts = [
     {
       id: 1,
-      user: "John Doe",
+      user: "Sachin Tendulkar",
       time: "2 hours ago",
-      content: "This is a sample post content. Implementing concepts of Likes and Comments.",
-      image: "/images/Blog.webp",
-    }
+      content: "Hailed as the world's most prolific batsman of all time...",
+      image: "/images/sachin.webp",
+    },
+    {
+      id: 2,
+      user: "Vansh Vatsa",
+      time: "1 hour ago",
+      content: "Jaspreet Bumrah awesome performance at Australia.",
+      image: "/images/jaspreet.jpeg",
+    },
+    {
+      id: 3,
+      user: "Ro-Hit Sharma",
+      time: "15 mins ago",
+      content: "Rohit Sharma Score 264 against Sri Lanka at the Eden Gardens.",
+      image: "/images/rohit-sharma.avif",
+    },
+    {
+      id: 4,
+      user: "Virat Kohli",
+      time: "1 year ago",
+      content: "Kohli has garnered 10 ICC Awards, making him the most awarded...",
+      image: "/images/kholi.jpg",
+    },
+    {
+      id: 5,
+      user: "MS Dhoni",
+      time: "2 year ago",
+      content: " He has scored 16 centuries and 106 fifties in his international career",
+      image: "/images/dhoni.avif",
+    },
+    {
+      id: 6,
+      user: "Mohammad Siraj",
+      time: "15 mins ago",
+      content: "His contributions were pivotal as India claimed a famous 2-1 away win against Australia. Siraj started to shine as an ODI bowler as well, and was lethal particularly in the powerplay.",
+      image: "/images/siraj.webp",
+    },
   ];
+  
+
   return (
     <div className="container mx-auto p-4 bg-white shadow rounded-lg max-w-2xl">
-      {posts.map((post) => (
-        <Post key={post.id} {...post} />
-      ))}
+      <div className="space-y-8"> 
+        {posts.map((post) => (
+          <Post key={post.id} {...post} />
+        ))}
+      </div>
     </div>
   );
 };

src/components/Post.jsx

@@ -1,13 +1,27 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ActionButtons from "./ActionButtons";
 import CommentForm from "./CommentForm";
 import CommentsModal from "./CommentsModal";
 
-const Post = ({ user, time, content, image }) => {
-  const [likes, setLikes] = useState(0);
-  const [comments, setComments] = useState([]);
+const Post = ({ id, user, time, content, image }) => {
+  const [likes, setLikes] = useState(() => {
+    const storedLikes = localStorage.getItem(`post-${id}-likes`);
+    return storedLikes ? JSON.parse(storedLikes) : 0;
+  });
+
+  const [comments, setComments] = useState(() => {
+    const storedComments = localStorage.getItem(`post-${id}-comments`);
+    return storedComments ? JSON.parse(storedComments) : [];
+  });
+
   const [newComment, setNewComment] = useState("");
   const [showComments, setShowComments] = useState(false);
+  useEffect(() => {
+    localStorage.setItem(`post-${id}-likes`, JSON.stringify(likes));
+  }, [id, likes]);
+  useEffect(() => {
+    localStorage.setItem(`post-${id}-comments`, JSON.stringify(comments));
+  }, [id, comments]);
 
   const handleLike = () => setLikes((prev) => prev + 1);