Features/blog details jisan

src/UI/SocialMediaIcons.jsx

@@ -0,0 +1,34 @@
+// components/SocialMediaIcons.jsx
+import React from "react";
+import { Facebook, Twitter, Instagram } from "react-feather";
+
+const SocialMediaIcons = ({
+  size = 24,
+  color = "text-gray-500",
+  hoverColor = "hover:text-blue-600"
+}) => {
+  const icons = [
+    { Icon: Facebook, link: "https://facebook.com", label: "Facebook" },
+    { Icon: Twitter, link: "https://twitter.com", label: "Twitter" },
+    { Icon: Instagram, link: "https://instagram.com", label: "Instagram" }
+  ];
+
+  return (
+    <div className="flex space-x-4">
+      {icons.map(({ Icon, link, label }, index) => (
+        <a
+          key={index}
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`${color} ${hoverColor} cursor-pointer`}
+          aria-label={label}
+        >
+          <Icon size={size} />
+        </a>
+      ))}
+    </div>
+  );
+};
+
+export default SocialMediaIcons;

src/UI/customSVG/ArrowIcon.js

@@ -0,0 +1,13 @@
+const ArrowIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-4 w-4"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+  </svg>
+);
+
+export default ArrowIcon;

src/app/blogs/[id]/page.js

@@ -0,0 +1,5 @@
+import BlogDetailsPage from "@/components/BlogDetails/BlogDetailsPage";
+
+const BlogDetails = ({ params }) => <BlogDetailsPage params={params} />;
+
+export default BlogDetails;

src/app/blogs/page.js

@@ -1,5 +1,5 @@
 import BlogPage from "@/components/Blogs";
 
-const Blog = () => <BlogPage />;
+const Blogs = () => <BlogPage />;
 
-export default Blog;
+export default Blogs;

src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx

@@ -0,0 +1,81 @@
+import React from "react";
+import Image from "next/image";
+import { comments } from "@/data/blogsData";
+import AppButton from "@/UI/AppButton";
+
+const CommentSection = () => {
+  return (
+    <div className="max-w-5xl mx-auto bg-white shadow-md rounded-lg p-6">
+      <h2 className="text-2xl font-semibold mb-6">
+        Total Comment ({comments.length.toString().padStart(2, "0")})
+        {/* Total Comment ({convertNumToPad(comments.length)}) */}
+      </h2>
+      {comments.map(({ id, name, avatar, time, comment, replies }) => (
+        <div key={id} className="mb-6 border-b pb-4 last:border-b-0">
+          {/* Parent Comment */}
+          <div className="flex items-start gap-4">
+            <Image
+              src={avatar}
+              alt={`${name}'s avatar`}
+              width={48}
+              height={48}
+              className="rounded-full object-cover"
+              priority
+            />
+            <div className="flex-1">
+              <div className="flex justify-between items-center">
+                <h3 className="text-lg font-medium text-gray-800">{name}</h3>
+                <p className="text-sm text-gray-500">{time}</p>
+              </div>
+              <p className="text-gray-700 mt-2">{comment}</p>
+              <AppButton
+                text="Reply"
+                customStyles={" mt-2 text-blue-500 text-sm font-medium hover:underline"}
+              />
+            </div>
+          </div>
+
+          {/* Replies */}
+          {replies.length > 0 && (
+            <div className="ml-14 mt-4 space-y-4">
+              {replies.map(
+                ({
+                  id: replyId,
+                  name: replyName,
+                  avatar: replyAvatar,
+                  time: replyTime,
+                  comment: replyComment
+                }) => (
+                  <div key={replyId} className="flex items-start gap-4">
+                    <Image
+                      src={replyAvatar}
+                      alt={`${replyName}'s avatar`}
+                      width={40}
+                      height={40}
+                      className="rounded-full object-cover"
+                      priority
+                    />
+                    <div className="flex-1">
+                      <div className="flex justify-between items-center">
+                        <h3 className="text-md font-medium text-gray-800">{replyName}</h3>
+                        <p className="text-sm text-gray-500">{replyTime}</p>
+                      </div>
+                      <p className="text-gray-700 mt-2">{replyComment}</p>
+                      <AppButton
+                        text="Reply"
+                        withoutHrefBtn={true}
+                        customStyles={" mt-2 text-blue-500 text-sm font-medium hover:underline"}
+                      />
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CommentSection;

src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx

@@ -0,0 +1,149 @@
+"use client";
+
+import AppButton from "@/UI/AppButton";
+import { checkEmailForValid } from "@/utils/appHelpers";
+import React, { useState } from "react";
+
+const BlogCommentForm = () => {
+  const [form, setForm] = useState({ name: "", email: "", comment: "" });
+  const [emailError, setEmailError] = useState("");
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    // Validate email if the field being changed is 'email'
+    if (name === "email") {
+      if (!checkEmailForValid(value)) {
+        setEmailError("Invalid email address");
+      } else {
+        setEmailError(""); // Clear the error if valid
+      }
+    }
+
+    setForm((prevForm) => ({ ...prevForm, [name]: value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!checkEmailForValid(form.email)) {
+      setEmailError("Invalid email address");
+      return; // Prevent form submission if the email is invalid
+    }
+
+    setForm({ name: "", email: "", comment: "" });
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto bg-white shadow-md rounded-lg p-8">
+      <h2 className="text-2xl font-semibold mb-6 text-gray-800">Leave a Comment</h2>
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="flex flex-wrap gap-4">
+          <input
+            type="text"
+            name="name"
+            placeholder="Your Name"
+            value={form.name}
+            onChange={handleChange}
+            className="flex-1 min-w-[240px] p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <div className="flex-1 min-w-[240px]">
+            <input
+              type="email"
+              name="email"
+              placeholder="Your Email"
+              value={form.email}
+              onChange={handleChange}
+              className={`p-3 border ${
+                emailError ? "border-red-500" : "bg-gray-50"
+              } placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500`}
+            />
+            {emailError && <p className="text-red-500 text-sm mt-1">{emailError}</p>}
+          </div>
+        </div>
+
+        <textarea
+          name="comment"
+          placeholder="Write your comment here..."
+          value={form.comment}
+          onChange={handleChange}
+          className="w-full p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          rows="5"
+        ></textarea>
+        <AppButton
+          withoutHrefBtn={true}
+          type="submit"
+          text="Submit Now"
+          customStyles={
+            "w-full md:w-1/3 rounded-full bg-blue-500 text-white py-3 font-semibold hover:bg-blue-600 transition-all duration-300"
+          }
+        />
+      </form>
+    </div>
+  );
+};
+
+export default BlogCommentForm;
+
+// "use client";
+
+// import React, { useState } from "react";
+
+// const BlogCommentForm = () => {
+//   const [form, setForm] = useState({ name: "", email: "", comment: "" });
+
+//   const handleChange = (e) => {
+//     const { name, value } = e.target;
+//     setForm({ ...form, [name]: value });
+//   };
+
+//   const handleSubmit = (e) => {
+//     e.preventDefault();
+//     console.log("Form submitted:", form);
+//     setForm({ name: "", email: "", comment: "" });
+//   };
+
+//   return (
+//     <div className="max-w-4xl mx-auto bg-white shadow-md rounded-lg p-8">
+//       <h2 className="text-2xl font-semibold mb-6 text-gray-800">Leave a Comment</h2>
+//       <form onSubmit={handleSubmit} className="space-y-6">
+//         <div className="flex flex-wrap gap-4">
+//           <input
+//             type="text"
+//             name="name"
+//             placeholder="Your Name"
+//             value={form.name}
+//             onChange={handleChange}
+//             className="flex-1 min-w-[240px] p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           />
+//           <input
+//             type="email"
+//             name="email"
+//             placeholder="Your Email"
+//             value={form.email}
+//             onChange={handleChange}
+//             className="flex-1 min-w-[240px] p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           />
+//         </div>
+
+//         <textarea
+//           name="comment"
+//           placeholder="Write your comment here..."
+//           value={form.comment}
+//           onChange={handleChange}
+//           className="w-full p-3 border bg-gray-50 placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+//           rows="5"
+//         ></textarea>
+
+//         <button
+//           type="submit"
+//           className="w-full md:w-1/3 rounded-full bg-blue-500 text-white py-3 font-semibold hover:bg-blue-600 transition-all duration-300"
+//         >
+//           Submit Now
+//         </button>
+//       </form>
+//     </div>
+//   );
+// };
+
+// export default BlogCommentForm;

src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx

@@ -0,0 +1,68 @@
+import SocialMediaIcons from "@/UI/SocialMediaIcons";
+import React from "react";
+import { CheckCircle } from "react-feather";
+
+const BlogContent = ({ content }) => {
+  const {
+    title,
+    paragraph1,
+    paragraph2,
+    paragraph3,
+    quote,
+    points = [] // Default to empty array if points is not passed
+  } = content || {};
+
+  return (
+    <div className="max-w-5xl mx-auto bg-white px-4 sm:px-6 lg:px-8">
+      <h1 className="text-2xl sm:text-3xl font-bold text-gray-800 text-center sm:text-left">
+        {title}
+      </h1>
+      <div className="mt-4">
+        <p className="text-gray-600 leading-relaxed text-justify">{paragraph1}</p>
+
+        {/* Render points if available */}
+        {points.length > 0 && (
+          <ul className="mt-4 space-y-2 text-gray-600">
+            {points.map((point, index) => (
+              <li key={index} className="flex items-start">
+                {CheckCircle && <CheckCircle className="text-blue-600 w-5 h-5 mt-1" />}
+                <span className="ml-2">{point}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {/* Render quote if available */}
+        {quote && (
+          <blockquote className="mt-6 bg-blue-100 border-l-4 border-blue-500 pl-4 italic text-gray-700">
+            {quote}
+          </blockquote>
+        )}
+
+        {/* Paragraph 2 and 3 */}
+        <p className="mt-4 text-gray-600">{paragraph2}</p>
+        <p className="mt-4 text-gray-600">{paragraph3}</p>
+      </div>
+
+      {/* Tagging and social media section */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-6 border-t pt-4 space-y-4 sm:space-y-0">
+        <div className="flex flex-wrap space-x-3 space-y-2 sm:space-y-0">
+          {["Appointment", "Doctors", "Health", "Hospital"].map((tag, index) => (
+            <span
+              key={index}
+              className="px-4 py-1 text-sm font-semibold bg-gray-100 hover:bg-blue-600 hover:text-white rounded-full"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+        <div className="flex items-center space-x-4">
+          <span className="text-gray-500 font-medium">Share :</span>
+          <SocialMediaIcons />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogContent;