nested-comments

om-priya · Feb 28, 2024 · 9af1ca1 · 9af1ca1
1 parent 08905fe
commit 9af1ca1
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 1 deletion.
diff --git a/LLD/app/src/App.js b/LLD/app/src/App.js
@@ -6,17 +6,19 @@ import Login from "./components/Login";
 import ProtectedRoute from "./components/ProtectedRoute";
 import { useState } from "react";
 import Accordion from "./components/Accordion";
+import Comments from "./components/comments/Comments";
 
 function App() {
   const [lang, setLang] = useState("en");
   return (
     <div>
       <header className="text-2xl font-bold py-5 bg-black text-white text-center flex">
         Hello World
-        <nav className="px-20 m-2 w-[600px] flex justify-between text-lg">
+        <nav className="px-20 m-2 w-[800px] flex justify-between text-lg">
           <a href="/">Home </a>
           <a href="/about">About </a>
           <a href="/accordion">Accordion </a>
+          <a href="/comments">Nested Comments </a>
           <a href="/team">Team </a>
           <a href="/login">Login </a>
         </nav>
@@ -37,6 +39,7 @@ function App() {
           <Route path="/about" element={<About lang={lang} />}></Route>
           <Route path="/login" element={<Login />}></Route>
           <Route path="/accordion" element={<Accordion />}></Route>
+          <Route path="/comments" element={<Comments />}></Route>
         </Routes>
       </BrowserRouter>
     </div>

diff --git a/LLD/app/src/components/comments/CommentBox.js b/LLD/app/src/components/comments/CommentBox.js
@@ -0,0 +1,21 @@
+const CommentBox = ({ data }) => {
+  return data.map((comment, index) => (
+    <div className=" pl-10 border-l-2 border-black" key={index}>
+      <div className="flex">
+        <div>
+          <img
+            className="w-16 p-2 rounded-full"
+            src="https://www.redditstatic.com/avatars/defaults/v2/avatar_default_1.png"
+            alt="user"
+          />
+        </div>
+        <div>
+          <p className="font-bold px-2 py-4">{comment.username}</p>
+          <p className="px-2">{comment.comment}</p>
+        </div>
+      </div>
+      <div>{comment?.replies && <CommentBox data={comment.replies} />}</div>
+    </div>
+  ));
+};
+export default CommentBox;
diff --git a/LLD/app/src/components/comments/Comments.js b/LLD/app/src/components/comments/Comments.js
@@ -0,0 +1,81 @@
+import CommentBox from "./CommentBox";
+
+const data = [
+  {
+    username: "Akshay Saini",
+    comment: "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+    replies: [
+      {
+        username: "Deepika Padukone",
+        comment: "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+      },
+    ],
+  },
+  {
+    username: "Elon Musk",
+    comment: "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+    replies: [
+      {
+        username: "Deepika Padukone",
+        comment: "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+        replies: [
+          {
+            username: "Deepika Padukone",
+            comment:
+              "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+            replies: [
+              {
+                username: "Deepika Padukone",
+                comment:
+                  "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+                replies: [
+                  {
+                    username: "Deepika Padukone",
+                    comment:
+                      "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+                    replies: [
+                      {
+                        username: "Deepika Padukone",
+                        comment:
+                          "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+                        replies: [
+                          {
+                            username: "Deepika Padukone",
+                            comment:
+                              "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            username: "Deepika Padukone",
+            comment:
+              "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+          },
+        ],
+      },
+      {
+        username: "Deepika Padukone",
+        comment: "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+      },
+    ],
+  },
+  {
+    username: "Sachin Tendulkar",
+    comment: "Lorem ipsum dolor sit amet consectetur adip occurence velit",
+  },
+];
+
+const Comments = () => {
+  return (
+    <div>
+      <CommentBox data={data} />
+    </div>
+  );
+};
+export default Comments;