refactor: remove comments and render component on requested page

app/components/CommentBox.tsx

@@ -5,7 +5,6 @@ type CommentProperties = {
   commentContent: string;
   pubDate: string;
   likeCount: number;
-  // setLikeCount: (like: number) => number;
 };
 
 const CommentBox = ({
@@ -15,8 +14,7 @@ const CommentBox = ({
   commentContent,
   pubDate,
   likeCount,
-}: // setLikeCount,
-CommentProperties) => {
+}: CommentProperties) => {
   return (
     <div className="flex w-full max-w-[54rem] items-start gap-[0.75rem] self-stretch rounded-[.5rem] border-[.8px] border-solid border-[#cbd5e1] bg-white px-[1rem] py-[1.2rem] lg:py-4">
       <img src={userPicUrl} alt="Profile Pic" className="h-10 w-10" />

app/routes/_index.tsx

@@ -2,6 +2,7 @@ import type { MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 import { useState } from "react";
 
+import CommentBox from "~/components/CommentBox";
 import { Button } from "~/components/ui/button";
 import CardPlatform from "~/components/ui/card/card-platform";
 import OtpAuth from "~/components/ui/otp/OtpAuth";
@@ -18,6 +19,23 @@ const handleSubmit = (values: Input[]) => {
   console.log({ values });
 };
 
+const commentData: {
+  userPicUrl: string;
+  userDisplayName: string;
+  userTagName: string;
+  commentContent: string;
+  likeCount: number;
+  pubDate: string;
+} = {
+  userPicUrl: "../public/images/comment-user-pic.svg",
+  userDisplayName: "Uduak Essien",
+  userTagName: "Uduess",
+  commentContent:
+    "Living a balanced lifestyle is essential. Focus on healthy eating, regular exercise, and mental well-being. A well-rounded lifestyle leads to a happier, more fulfilling life. Embrace positive habits and enjoy the journey.",
+  pubDate: `02 Jan, 2020 Wed 02:30pm`,
+  likeCount: 20,
+};
+
 export default function Index() {
   const [openModal, setOpenModal] = useState(false);
 
@@ -59,6 +77,16 @@ export default function Index() {
             containerClassName="max-w-[341px]"
           />
         </div>
+        <div className="p-2">
+          <CommentBox
+            userPicUrl={commentData.userPicUrl}
+            userDisplayName={commentData.userDisplayName}
+            userTagName={commentData.userTagName}
+            commentContent={commentData.commentContent}
+            pubDate={commentData.pubDate}
+            likeCount={commentData.likeCount}
+          />
+        </div>
         <li>
           <a
             className="text-blue-700 underline visited:text-purple-900"