Feat/hng 2145 create and implement the api integration of the comment section of the dynamic blog pages #23

app/components/comment-section/App.tsx

@@ -0,0 +1,51 @@
+import { FC } from "react";
+import "../../styles/global.css";
+
+import CommentSection from "./CommentSection";
+
+interface Comment {
+  id: number;
+  author: string;
+  handle: string;
+  comment: string;
+  date: string;
+}
+const sampleComments: Comment[] = [
+  {
+    id: 1,
+    author: "Matthew",
+    handle: "@matt4real",
+    comment:
+      "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.",
+    date: "21-Jun-2024  Wed 12:20pm",
+  },
+  {
+    id: 2,
+    author: "Abraham",
+    handle: "@SonofGod",
+    comment:
+      "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.",
+    date: "21-Jun-2024  Wed 12:20pm",
+  },
+  {
+    id: 3,
+    author: "Salma Bee",
+    handle: "@msFits",
+    comment:
+      "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.",
+    date: "21-Jun-2024  Wed 12:20pm",
+  },
+];
+
+const App: FC = () => {
+  const addComment = (newComment: Comment) => {
+    sampleComments.push(newComment);
+  };
+  return (
+    <div className="font-family('Inter')">
+      <CommentSection comments={sampleComments} onAddComment={addComment} />
+    </div>
+  );
+};
+
+export default App;

app/components/comment-section/CommentSection.tsx

@@ -0,0 +1,65 @@
+import { FC, useState } from "react";
+import "../../styles/global.css";
+import Comments from "./Comments";
+
+interface Comment {
+  id: number;
+  comment: string;
+  author: string;
+  handle: string;
+  date: string;
+}
+
+interface FooterCommentProperties {
+  comments: Comment[];
+  onAddComment: (comment: Comment) => void;
+}
+
+const CommentSection: FC<FooterCommentProperties> = ({
+  comments,
+  onAddComment,
+}) => {
+  const [newCommentText, setNewCommentText] = useState<string>("");
+  const [author, setAuthor] = useState<string>("");
+  const [handle, setHandle] = useState<string>("");
+
+  const handleCommentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewCommentText(event.target.value);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const newComment: Comment = {
+      id: Date.now(),
+      comment: newCommentText,
+      author: author || "Anonymous",
+      handle: handle || "@unknown",
+      date: new Date().toLocaleString(),
+    };
+
+    onAddComment(newComment);
+    setNewCommentText("");
+    setAuthor("");
+    setHandle("");
+  };
+
+  return (
+    <div>
+      <Comments comments={comments} />
+      <form onSubmit={handleSubmit} className="mt-4 flex flex-col gap-2">
+        <input
+          type="text"
+          value={newCommentText}
+          onChange={handleCommentChange}
+          placeholder="Write a comment..."
+          className="border p-2"
+        />
+        <button type="submit" className="bg-[var(--primary)] p-2 text-white">
+          Add Comment
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default CommentSection;

app/components/comment-section/Comments.tsx

@@ -0,0 +1,79 @@
+import { FC } from "react";
+import "../../styles/global.css";
+
+import icon5 from "../../../public/back.svg";
+import icon6 from "../../../public/comment.svg";
+import icon1 from "../../../public/Ellipse 2.svg";
+import icon3 from "../../../public/notOk.svg";
+import icon2 from "../../../public/ok.svg";
+import icon4 from "../../../public/share.svg";
+import { Comment } from "./types";
+
+interface FooterCommentProperties {
+  comments: Comment[];
+}
+const Comments: FC<FooterCommentProperties> = ({ comments }) => {
+  return (
+    <div className="lg:full w-full border-2 border-solid bg-[var(--popover)] md:w-1/2">
+      <div className="px-2">
+        <h4 className="w-full self-stretch text-xl font-medium leading-normal">
+          Comments
+        </h4>
+        {comments.map((comment) => (
+          <div
+            key={comment.id}
+            className="flex-basis-0 my-4 flex flex-grow flex-col items-start border-2 border-solid px-8 py-2"
+          >
+            <div className="bg-[var(--popover)]">
+              <div className="flex gap-1">
+                <img src={icon1} alt="icon" />
+                <div className="text-sm md:text-xl lg:text-3xl">
+                  <strong className="text-[var(--neutral-1)]dark md:text-xl lg:text-3xl">
+                    {comment.author}
+                  </strong>
+                  <p className="lg:text-3xlfont-medium my-0 text-sm leading-normal text-[var(--neutral-2)] md:text-xl">
+                    {comment.handle}
+                  </p>
+                </div>
+              </div>
+              <p className="text-[var(--muted-foreground)]text-14 px-4 py-4 font-normal leading-normal md:text-xl lg:text-3xl">
+                {comment.comment}
+              </p>
+              <span className="text-[var(--neutral-1)]">{comment.date}</span>
+              <div className="inline-flex gap-3 md:text-xl lg:text-3xl">
+                <>
+                  <img
+                    src={icon2}
+                    alt="icon"
+                    className="border-2 border-solid p-1"
+                  />
+                  <img
+                    src={icon3}
+                    alt="icon"
+                    className="border-2 border-solid p-1"
+                  />
+                </>
+                <img
+                  src={icon4}
+                  alt="icon"
+                  className="border-2 border-solid p-1"
+                />
+                <img
+                  src={icon5}
+                  alt="icon"
+                  className="border-2 border-solid p-1"
+                />
+                <img
+                  src={icon6}
+                  alt="icon"
+                  className="border-2 border-solid p-1"
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+export default Comments;

app/components/comment-section/Input.tsx

@@ -0,0 +1,67 @@
+import { FC, useState } from "react";
+
+import "../../styles/global.css";
+
+import Comments from "./Comments";
+
+interface Comment {
+  id: number;
+  comment: string;
+  author: string;
+  handle: string;
+  date: string;
+}
+
+interface FooterCommentProperties {
+  comments: Comment[];
+  onAddComment: (comment: Comment) => void;
+}
+
+const CommentSection: FC<FooterCommentProperties> = ({
+  comments,
+  onAddComment,
+}) => {
+  const [newCommentText, setNewCommentText] = useState<string>("");
+  const [author, setAuthor] = useState<string>("");
+  const [handle, setHandle] = useState<string>("");
+
+  const handleCommentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewCommentText(event.target.value);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const newComment: Comment = {
+      id: Date.now(),
+      comment: newCommentText,
+      author: author || "Anonymous",
+      handle: handle || "@unknown",
+      date: new Date().toLocaleString(),
+    };
+
+    onAddComment(newComment);
+    setNewCommentText("");
+    setAuthor("");
+    setHandle("");
+  };
+
+  return (
+    <div>
+      <Comments comments={comments} />
+      <form onSubmit={handleSubmit} className="mt-4 flex flex-col gap-2">
+        <input
+          type="text"
+          value={newCommentText}
+          onChange={handleCommentChange}
+          placeholder="Write a comment..."
+          className="border border-[var(--primary)] p-2"
+        />
+        <button type="submit" className="bg-[var(--primary)] p-2 text-white">
+          Add Comment
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default CommentSection;

app/components/comment-section/types.ts

@@ -0,0 +1,16 @@
+export interface Comment {
+  id: number;
+  username?: string;
+  comment: string;
+  handle: string;
+  author?: string;
+  date?: string;
+  className?: string;
+  timestamp?: number;
+  image?: string;
+}
+export interface NewCommentInput {
+  name: string;
+  email: string;
+  text: string;
+}

app/components/ui/index.css

@@ -0,0 +1,15 @@
+:root{
+    --bg-general: #E4E4E7;
+    --bg-popover: #ffffff;
+    --text-primary: #71717A;
+    --text-dark: #0A0A0A;
+    --neutral: #525252;
+    --accent: #F97316;
+    --bg-border: #E4E4E7;
+    --border-stroke: #CBD5E1;
+}
+body{
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}

package.json

@@ -37,6 +37,7 @@
     "clsx": "^2.1.1",
     "isbot": "^4.4.0",
     "lucide-react": "^0.408.0",
+    "pnpm": "^9.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-email": "^2.1.5",