From d2ac423b5a4c29187e0d852b86027c7fbde43cac Mon Sep 17 00:00:00 2001 From: Jisan Molla Date: Tue, 24 Dec 2024 20:13:04 +0600 Subject: [PATCH 1/8] initial blogDetails route set --- src/app/blog/page.js | 5 ----- src/app/blogs/[id]/page.js | 3 +++ src/app/blogs/page.js | 5 +++++ src/components/Blog/Blog.jsx | 3 ++- src/data/navData.js | 4 ++-- 5 files changed, 12 insertions(+), 8 deletions(-) delete mode 100644 src/app/blog/page.js create mode 100644 src/app/blogs/[id]/page.js create mode 100644 src/app/blogs/page.js diff --git a/src/app/blog/page.js b/src/app/blog/page.js deleted file mode 100644 index 59be988..0000000 --- a/src/app/blog/page.js +++ /dev/null @@ -1,5 +0,0 @@ -import BlogPage from "@/components/Blog/Blog"; - -const Blog = () => ; - -export default Blog; diff --git a/src/app/blogs/[id]/page.js b/src/app/blogs/[id]/page.js new file mode 100644 index 0000000..ddffb9b --- /dev/null +++ b/src/app/blogs/[id]/page.js @@ -0,0 +1,3 @@ +const BlogDetails = ({ params }) =>

Welcome Blog Details Page {params.id}

; + +export default BlogDetails; diff --git a/src/app/blogs/page.js b/src/app/blogs/page.js new file mode 100644 index 0000000..9aafabb --- /dev/null +++ b/src/app/blogs/page.js @@ -0,0 +1,5 @@ +import BlogPage from "@/components/Blog/Blog"; + +const Blogs = () => ; + +export default Blogs; diff --git a/src/components/Blog/Blog.jsx b/src/components/Blog/Blog.jsx index 2b2056d..26656f3 100644 --- a/src/components/Blog/Blog.jsx +++ b/src/components/Blog/Blog.jsx @@ -6,6 +6,7 @@ import Image from "next/image"; import { User, Calendar, MessageCircle, Heart, Share2 } from "react-feather"; import { blogs } from "@/data/blogsData"; import CommonBanner from "@/UI/CommonBanner"; +import Link from "next/link"; const BlogPage = () => { const [currentPage, setCurrentPage] = useState(1); @@ -74,7 +75,7 @@ const BlogPage = () => {

{description}

diff --git a/src/data/navData.js b/src/data/navData.js index 3fc3c65..891227f 100644 --- a/src/data/navData.js +++ b/src/data/navData.js @@ -25,8 +25,8 @@ export const navData = [ href: "/about" }, { - label: "Blog", - href: "/blog" + label: "Blogs", + href: "/blogs" }, { label: "Contact Us", From b2526ed60380e0db55e8c0c51d68f698cbdc5280 Mon Sep 17 00:00:00 2001 From: Jisan Molla Date: Tue, 24 Dec 2024 20:57:35 +0600 Subject: [PATCH 2/8] blog details data showing normal stracture set --- src/app/blog/[id]/page.js | 5 ++ src/app/{blogs => blog}/page.js | 0 src/app/blogs/[id]/page.js | 3 - .../Blog/BlogDetails/BlogDetailsPage.jsx | 66 +++++++++++++++++++ src/data/navData.js | 2 +- 5 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 src/app/blog/[id]/page.js rename src/app/{blogs => blog}/page.js (100%) delete mode 100644 src/app/blogs/[id]/page.js create mode 100644 src/components/Blog/BlogDetails/BlogDetailsPage.jsx diff --git a/src/app/blog/[id]/page.js b/src/app/blog/[id]/page.js new file mode 100644 index 0000000..66a5407 --- /dev/null +++ b/src/app/blog/[id]/page.js @@ -0,0 +1,5 @@ +import BlogDetailsPage from "@/components/Blog/BlogDetails/BlogDetailsPage"; + +const BlogDetails = ({ params }) => ; + +export default BlogDetails; diff --git a/src/app/blogs/page.js b/src/app/blog/page.js similarity index 100% rename from src/app/blogs/page.js rename to src/app/blog/page.js diff --git a/src/app/blogs/[id]/page.js b/src/app/blogs/[id]/page.js deleted file mode 100644 index ddffb9b..0000000 --- a/src/app/blogs/[id]/page.js +++ /dev/null @@ -1,3 +0,0 @@ -const BlogDetails = ({ params }) =>

Welcome Blog Details Page {params.id}

; - -export default BlogDetails; diff --git a/src/components/Blog/BlogDetails/BlogDetailsPage.jsx b/src/components/Blog/BlogDetails/BlogDetailsPage.jsx new file mode 100644 index 0000000..7415045 --- /dev/null +++ b/src/components/Blog/BlogDetails/BlogDetailsPage.jsx @@ -0,0 +1,66 @@ +import React from "react"; +import { blogs } from "@/data/blogsData"; // Import your blogs data +import Image from "next/image"; + +const BlogDetailsPage = ({ params }) => { + const { id } = params; // Get the id from the params + + // Find the specific blog based on the id + const blog = blogs.find((blog) => blog.id.toString() === id); + + if (!blog) { + return

Blog not found

; // Handle the case where no blog matches the id + } + + const { + category, + categoryColors, + title, + date, + description, + author, + comments, + likes, + shares, + image + } = blog; + + return ( +
+

{title}

+
+ + {category} + +

{date}

+

By {author}

+
+ {title} +

{description}

+
+
+
+ Comments: + {comments} +
+
+ Likes: + {likes} +
+
+ Shares: + {shares} +
+
+
+
+ ); +}; + +export default BlogDetailsPage; diff --git a/src/data/navData.js b/src/data/navData.js index 891227f..c8d5209 100644 --- a/src/data/navData.js +++ b/src/data/navData.js @@ -26,7 +26,7 @@ export const navData = [ }, { label: "Blogs", - href: "/blogs" + href: "/blog" }, { label: "Contact Us", From 7527b088c6a096fef430145038075b5356e94763 Mon Sep 17 00:00:00 2001 From: Jisan Molla Date: Tue, 24 Dec 2024 21:09:41 +0600 Subject: [PATCH 3/8] some spelling solve --- src/data/navData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/navData.js b/src/data/navData.js index c8d5209..3fc3c65 100644 --- a/src/data/navData.js +++ b/src/data/navData.js @@ -25,7 +25,7 @@ export const navData = [ href: "/about" }, { - label: "Blogs", + label: "Blog", href: "/blog" }, { From 4c1565e4109e30455a0a64c07a9712ad8b8aecbf Mon Sep 17 00:00:00 2001 From: Jisan Molla Date: Sat, 28 Dec 2024 00:10:21 +0600 Subject: [PATCH 4/8] Blog details page almost all component is done, --- src/app/{blog => blogs}/[id]/page.js | 2 +- .../Blog/BlogDetails/BlogDetailsPage.jsx | 66 ----------- .../BlogDetailsComponents/BlogComment.jsx | 105 ++++++++++++++++++ .../BlogDetailsComponents/BlogCommentForm.jsx | 60 ++++++++++ .../BlogDetailsComponents/BlogContent.jsx | 85 ++++++++++++++ .../BlogDetailsComponents/BlogHeader.jsx | 87 +++++++++++++++ .../BlogDetails/BlogDetailsPage.jsx | 45 ++++++++ 7 files changed, 383 insertions(+), 67 deletions(-) rename src/app/{blog => blogs}/[id]/page.js (57%) delete mode 100644 src/components/Blog/BlogDetails/BlogDetailsPage.jsx create mode 100644 src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx create mode 100644 src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx create mode 100644 src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx create mode 100644 src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx create mode 100644 src/components/BlogDetails/BlogDetailsPage.jsx diff --git a/src/app/blog/[id]/page.js b/src/app/blogs/[id]/page.js similarity index 57% rename from src/app/blog/[id]/page.js rename to src/app/blogs/[id]/page.js index 66a5407..83b0b14 100644 --- a/src/app/blog/[id]/page.js +++ b/src/app/blogs/[id]/page.js @@ -1,4 +1,4 @@ -import BlogDetailsPage from "@/components/Blog/BlogDetails/BlogDetailsPage"; +import BlogDetailsPage from "@/components/BlogDetails/BlogDetailsPage"; const BlogDetails = ({ params }) => ; diff --git a/src/components/Blog/BlogDetails/BlogDetailsPage.jsx b/src/components/Blog/BlogDetails/BlogDetailsPage.jsx deleted file mode 100644 index 7415045..0000000 --- a/src/components/Blog/BlogDetails/BlogDetailsPage.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from "react"; -import { blogs } from "@/data/blogsData"; // Import your blogs data -import Image from "next/image"; - -const BlogDetailsPage = ({ params }) => { - const { id } = params; // Get the id from the params - - // Find the specific blog based on the id - const blog = blogs.find((blog) => blog.id.toString() === id); - - if (!blog) { - return

Blog not found

; // Handle the case where no blog matches the id - } - - const { - category, - categoryColors, - title, - date, - description, - author, - comments, - likes, - shares, - image - } = blog; - - return ( -
-

{title}

-
- - {category} - -

{date}

-

By {author}

-
- {title} -

{description}

-
-
-
- Comments: - {comments} -
-
- Likes: - {likes} -
-
- Shares: - {shares} -
-
-
-
- ); -}; - -export default BlogDetailsPage; diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx new file mode 100644 index 0000000..f9e4b61 --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx @@ -0,0 +1,105 @@ +import React from "react"; +import Image from "next/image"; +import { alterredUserAvatar } from "@/utils/appHelpers"; + +const CommentSection = () => { + const comments = [ + { + id: 1, + name: "Robert Smith", + avatar: "/avatar1.png", + time: "4 Hour Ago", + comment: + "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", + replies: [ + { + id: 11, + name: "Steven Smith", + avatar: "/avatar2.png", + time: "1 Hour Ago", + comment: + "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable." + } + ] + }, + { + id: 2, + name: "Deni Rover", + avatar: "/avatar3.png", + time: "6 Hour Ago", + comment: + "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", + replies: [] + }, + { + id: 3, + name: "Robert Smith", + avatar: "/avatar1.png", + time: "4 Hour Ago", + comment: + "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", + replies: [] + } + ]; + + return ( +
+

+ Total Comment ({comments.length.toString().padStart(2, "0")}) +

+ {comments.map((comment) => ( +
+ {/* Parent Comment */} +
+ {`${comment.name}'s +
+
+

{comment.name}

+

{comment.time}

+
+

{comment.comment}

+ +
+
+ + {/* Replies */} + {comment.replies.length > 0 && ( +
+ {comment.replies.map((reply) => ( +
+ {`${reply.name}'s +
+
+

{reply.name}

+

{reply.time}

+
+

{reply.comment}

+ +
+
+ ))} +
+ )} +
+ ))} +
+ ); +}; + +export default CommentSection; diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx new file mode 100644 index 0000000..147831c --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx @@ -0,0 +1,60 @@ +"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); + // Add your form submission logic here + setForm({ name: "", email: "", comment: "" }); + }; + + return ( +
+

Leave A Comment

+
+
+ + +
+ + +
+
+ ); +}; + +export default BlogCommentForm; diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx new file mode 100644 index 0000000..a16adec --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx @@ -0,0 +1,85 @@ +import React from "react"; + +const BlogContent = ({ CheckCircle, Facebook, Twitter, Instagram, title }) => { + return ( +
+ {/* Blog Title */} +

{title}

+ {/* Description */} +
+

+ Dramatically syndicate alternative infrastructures through backward-compatible + web-readiness. Completely predominate economically sound information without maintainable + alignments. Compellingly generate resource-maximizing imperatives through cooperative best + practices. +

+ {/* Custom List with Check Icons */} +
    +
  • + + + Dramatically syndicate alternative infrastructures through backward-compatible. + +
    • +
  • + + + Economically sound information without maintainable alignments. + +
    • +
  • + + + Collaboratively syndicate world-class information after principle-centered. + +
    • +
  • + + + Collaboratively network bricks-and-clicks best practices via economically sound. + +
    • +
+ +
+ “There are many variations of passages of Lorem Ipsum available, but the majority have + suffered alteration in some form, by variations of passages.” +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has + been the industry standard dummy text ever since the 1500s, when an unknown printer took a + galley of type and scrambled it to make a type specimen book. +

+

+ Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry standard dummy text ever since the 1500. +

+
+ + {/* Tags and Share Section */} +
+ {/* Tags */} +
+ {["Appointment", "Doctors", "Health", "Hospital"].map((tag, index) => ( + + {tag} + + ))} +
+ + {/* Share Section */} +
+ Share : + + + +
+
+
+ ); +}; + +export default BlogContent; diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx new file mode 100644 index 0000000..35bcdc3 --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx @@ -0,0 +1,87 @@ +import Image from "next/image"; +import { + User, + Calendar, + MessageCircle, + Heart, + Share2, + CheckCircle, + Facebook, + Twitter, + Instagram +} from "react-feather"; +import BlogContent from "./BlogContent"; + +const BlogHeader = ({ + category, + title, + author, + date, + likes, + shares, + image, + categoryColorMap, + comments +}) => { + return ( +
+
+ {/* Blog Banner Image */} + Blog banner + + {/* Blog Metadata */} +
+ {/* Left Section: Category, Author, Date */} +
+ + {category} + +
+ + {author} +
+
+ + {date} +
+
+ + {/* Right Section: Comments, Likes, Shares */} +
+
+ + {comments} +
+
+ + {likes} +
+
+ + {shares} +
+
+
+ +
+
+ ); +}; + +export default BlogHeader; diff --git a/src/components/BlogDetails/BlogDetailsPage.jsx b/src/components/BlogDetails/BlogDetailsPage.jsx new file mode 100644 index 0000000..8fbfcea --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsPage.jsx @@ -0,0 +1,45 @@ +import React from "react"; +import { blogs, categoryColorMap } from "@/data/blogsData"; +import BlogHeader from "./BlogDetailsComponents/BlogHeader"; +import BlogComment from "./BlogDetailsComponents/BlogComment"; +import BlogCommentForm from "./BlogDetailsComponents/BlogCommentForm"; + +const BlogDetailsPage = ({ params }) => { + const { id } = params; + + // Find the blog data using the ID from the URL params + const blog = blogs.find((blog) => blog.id.toString() === id); + + // If blog not found, show a message + if (!blog) { + return

Blog not found

; + } + + const { category, title, date, description, author, comments, likes, shares, image } = blog; + + return ( +
+ {/* Pass blog data to the BlogHeader */} + +
+ +
+
+ +
+
+ ); +}; + +export default BlogDetailsPage; From 1ef7ef3498815d74ce82bd1ea146da92b0cdc562 Mon Sep 17 00:00:00 2001 From: Jisan Molla Date: Sun, 29 Dec 2024 22:09:28 +0600 Subject: [PATCH 5/8] Blog Details page all component design and responsice ensure --- .../BlogDetailsComponents/BlogComment.jsx | 2 +- .../BlogDetailsComponents/BlogCommentForm.jsx | 28 +++--- .../BlogDetailsComponents/BlogContent.jsx | 24 ++--- .../BlogDetailsComponents/BlogHeader.jsx | 96 +++++++++---------- .../BlogDetailsComponents/BlogSidebar.jsx | 16 ++++ .../BlogDetailsComponents/PostTags.jsx | 37 +++++++ .../BlogDetailsComponents/RecentPost.jsx | 50 ++++++++++ .../SearchAndCategories.jsx | 72 ++++++++++++++ .../BlogDetails/BlogDetailsPage.jsx | 53 +++++----- 9 files changed, 278 insertions(+), 100 deletions(-) create mode 100644 src/components/BlogDetails/BlogDetailsComponents/BlogSidebar.jsx create mode 100644 src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx create mode 100644 src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx create mode 100644 src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx index f9e4b61..c601d1f 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx @@ -43,7 +43,7 @@ const CommentSection = () => { ]; return ( -
+

Total Comment ({comments.length.toString().padStart(2, "0")})

diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx index 147831c..4edf0b5 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx @@ -1,4 +1,5 @@ "use client"; + import React, { useState } from "react"; const BlogCommentForm = () => { @@ -12,43 +13,44 @@ const BlogCommentForm = () => { const handleSubmit = (e) => { e.preventDefault(); console.log("Form submitted:", form); - // Add your form submission logic here setForm({ name: "", email: "", comment: "" }); }; return ( -
-

Leave A Comment

-
-
+
+

Leave a Comment

+ +
+ + diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx index a16adec..ffba815 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx @@ -2,18 +2,18 @@ import React from "react"; const BlogContent = ({ CheckCircle, Facebook, Twitter, Instagram, title }) => { return ( -
- {/* Blog Title */} -

{title}

- {/* Description */} +
+

+ {title} +

-

+

Dramatically syndicate alternative infrastructures through backward-compatible web-readiness. Completely predominate economically sound information without maintainable alignments. Compellingly generate resource-maximizing imperatives through cooperative best practices.

- {/* Custom List with Check Icons */} +
  • @@ -40,11 +40,11 @@ const BlogContent = ({ CheckCircle, Facebook, Twitter, Instagram, title }) => {
-
“There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by variations of passages.”
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a @@ -56,21 +56,17 @@ const BlogContent = ({ CheckCircle, Facebook, Twitter, Instagram, title }) => {

- {/* Tags and Share Section */} -
- {/* Tags */} -
+
+
{["Appointment", "Doctors", "Health", "Hospital"].map((tag, index) => ( {tag} ))}
- - {/* Share Section */}
Share : diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx index 35bcdc3..0dfac9d 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx @@ -24,62 +24,58 @@ const BlogHeader = ({ comments }) => { return ( -
-
- {/* Blog Banner Image */} - Blog banner +
+ Blog banner - {/* Blog Metadata */} -
- {/* Left Section: Category, Author, Date */} -
- - {category} - -
- - {author} -
-
- - {date} -
+
+
+ + {category} + +
+ + {author}
+
+ + {date} +
+
- {/* Right Section: Comments, Likes, Shares */} -
-
- - {comments} -
-
- - {likes} -
-
- - {shares} -
+
+
+ + {comments} +
+
+ + {likes} +
+
+ + {shares}
-
+ +
); }; diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogSidebar.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogSidebar.jsx new file mode 100644 index 0000000..e24744c --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogSidebar.jsx @@ -0,0 +1,16 @@ +import React from "react"; +import SearchAndCategories from "./SearchAndCategories"; +import RecentPost from "./RecentPost"; +import PostTags from "./PostTags"; + +const BlogSidebar = () => { + return ( + + ); +}; + +export default BlogSidebar; diff --git a/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx b/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx new file mode 100644 index 0000000..0515a19 --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx @@ -0,0 +1,37 @@ +"use client"; + +import React from "react"; + +const PostTags = () => { + const tags = [ + "Appointment", + "Doctors", + "Health", + "Best", + "Hospital", + "Laboratory", + "Antibiotics", + "COVID-19", + "Care" + ]; + + return ( +
+

+ Post Tags +

+
+ {tags.map((tag, index) => ( + + {tag} + + ))} +
+
+ ); +}; + +export default PostTags; diff --git a/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx b/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx new file mode 100644 index 0000000..34b417e --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx @@ -0,0 +1,50 @@ +"use client"; + +import React from "react"; +import Image from "next/image"; + +const RecentPost = () => { + const posts = [ + { + date: "22 June 2023", + title: "Precious Tips To Help You Get Better.", + image: + "https://media.istockphoto.com/id/2154829989/photo/a-doctor-interacting-with-medical-icons-on-a-futuristic-interfac.jpg?s=1024x1024&w=is&k=20&c=x5B3eD84z1nLokUFjEyw4HtZjIILJUQcdKMBraHTMCo=" + }, + { + date: "22 June 2023", + title: "Your Health Matters: Tips & Tricks.", + image: + "https://media.istockphoto.com/id/1869420726/photo/human-brain.jpg?s=1024x1024&w=is&k=20&c=ui2uCTPbWaLU3zoAZz2pHVtM97yRR_2y1PBDMyfiGAw=" + }, + { + date: "22 June 2023", + title: "Stay Healthy During the Pandemic.", + image: + "https://images.unsplash.com/photo-1690306815535-dbe66a7c6185?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + } + ]; + + return ( +
+

+ Recent Post +

+
    + {posts.map((post, index) => ( +
  • +
    + {post.title} +
    +
    +

    {post.date}

    +

    {post.title}

    +
    +
    • + ))} +
+
+ ); +}; + +export default RecentPost; diff --git a/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx b/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx new file mode 100644 index 0000000..586f717 --- /dev/null +++ b/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx @@ -0,0 +1,72 @@ +"use client"; + +import React from "react"; + +const SearchAndCategories = () => { + const categories = ["Urology", "Gynecologist", "Medicine", "Child Care", "Covid Test", "Dentist"]; + + return ( +
+ {/* Search Section */} +
+

Search

+
+ + +
+
+ + {/* Categories Section */} +
+

+ Categories +

+
    + {categories.map((category, index) => ( +
  • + {category} + + + +
    • + ))} +
+
+
+ ); +}; + +export default SearchAndCategories; diff --git a/src/components/BlogDetails/BlogDetailsPage.jsx b/src/components/BlogDetails/BlogDetailsPage.jsx index 8fbfcea..9cbcbdd 100644 --- a/src/components/BlogDetails/BlogDetailsPage.jsx +++ b/src/components/BlogDetails/BlogDetailsPage.jsx @@ -3,40 +3,49 @@ import { blogs, categoryColorMap } from "@/data/blogsData"; import BlogHeader from "./BlogDetailsComponents/BlogHeader"; import BlogComment from "./BlogDetailsComponents/BlogComment"; import BlogCommentForm from "./BlogDetailsComponents/BlogCommentForm"; +import BlogSidebar from "./BlogDetailsComponents/BlogSidebar"; const BlogDetailsPage = ({ params }) => { const { id } = params; - // Find the blog data using the ID from the URL params const blog = blogs.find((blog) => blog.id.toString() === id); - // If blog not found, show a message if (!blog) { - return

Blog not found

; + return ( +
+

Blog not found

+
+ ); } const { category, title, date, description, author, comments, likes, shares, image } = blog; return ( -
- {/* Pass blog data to the BlogHeader */} - -
- -
-
- +
+
+
+ +
+ +
+
+ +
+
+
+ +
); From a27c140c65b4f360d9081d51b93c9d8153be8691 Mon Sep 17 00:00:00 2001 From: Jisan Molla Date: Mon, 30 Dec 2024 16:52:54 +0600 Subject: [PATCH 6/8] all section almost dynamic,and more --- .../BlogDetailsComponents/BlogComment.jsx | 45 +--- .../BlogDetailsComponents/BlogContent.jsx | 67 ++--- .../BlogDetailsComponents/BlogHeader.jsx | 30 ++- .../BlogDetails/BlogDetailsPage.jsx | 27 +- src/components/Blogs/index.jsx | 31 +-- src/data/blogsData.js | 238 +++++++++++++++--- 6 files changed, 281 insertions(+), 157 deletions(-) diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx index c601d1f..7202618 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx @@ -1,47 +1,8 @@ import React from "react"; import Image from "next/image"; -import { alterredUserAvatar } from "@/utils/appHelpers"; +import { comments } from "@/data/blogsData"; const CommentSection = () => { - const comments = [ - { - id: 1, - name: "Robert Smith", - avatar: "/avatar1.png", - time: "4 Hour Ago", - comment: - "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", - replies: [ - { - id: 11, - name: "Steven Smith", - avatar: "/avatar2.png", - time: "1 Hour Ago", - comment: - "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable." - } - ] - }, - { - id: 2, - name: "Deni Rover", - avatar: "/avatar3.png", - time: "6 Hour Ago", - comment: - "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", - replies: [] - }, - { - id: 3, - name: "Robert Smith", - avatar: "/avatar1.png", - time: "4 Hour Ago", - comment: - "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", - replies: [] - } - ]; - return (

@@ -52,7 +13,7 @@ const CommentSection = () => { {/* Parent Comment */}
{`${comment.name}'s { {comment.replies.map((reply) => (
{`${reply.name}'s { +const BlogContent = ({ + CheckCircle, + Facebook, + Twitter, + Instagram, + title, + paragraph1, + paragraph2, + paragraph3, + quote, + points +}) => { return (

{title}

-

- Dramatically syndicate alternative infrastructures through backward-compatible - web-readiness. Completely predominate economically sound information without maintainable - alignments. Compellingly generate resource-maximizing imperatives through cooperative best - practices. -

- +

{paragraph1}

    -
  • - - - Dramatically syndicate alternative infrastructures through backward-compatible. - -
    • -
  • - - - Economically sound information without maintainable alignments. - -
    • -
  • - - - Collaboratively syndicate world-class information after principle-centered. - -
    • -
  • - - - Collaboratively network bricks-and-clicks best practices via economically sound. - -
    • + {points.map((point, index) => ( +
  • + + {point} +
    • + ))}
- “There are many variations of passages of Lorem Ipsum available, but the majority have - suffered alteration in some form, by variations of passages.” + {quote}
- -

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has - been the industry standard dummy text ever since the 1500s, when an unknown printer took a - galley of type and scrambled it to make a type specimen book. -

-

- Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the - industry standard dummy text ever since the 1500. -

+

{paragraph2}

+

{paragraph3}

-
{["Appointment", "Doctors", "Health", "Hospital"].map((tag, index) => ( diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx index 0dfac9d..1715528 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx @@ -14,14 +14,19 @@ import BlogContent from "./BlogContent"; const BlogHeader = ({ category, + color, title, - author, date, + author, + comments, likes, shares, image, - categoryColorMap, - comments + paragraph1, + paragraph2, + paragraph3, + quote, + points }) => { return (
@@ -36,11 +41,7 @@ const BlogHeader = ({
- + {category}
@@ -54,14 +55,14 @@ const BlogHeader = ({
-
- - {comments} -
{likes}
+
+ + {comments} +
{shares} @@ -75,6 +76,11 @@ const BlogHeader = ({ Facebook={Facebook} Twitter={Twitter} Instagram={Instagram} + paragraph1={paragraph1} + paragraph2={paragraph2} + paragraph3={paragraph3} + quote={quote} + points={points} />
); diff --git a/src/components/BlogDetails/BlogDetailsPage.jsx b/src/components/BlogDetails/BlogDetailsPage.jsx index 9cbcbdd..ad5a1a0 100644 --- a/src/components/BlogDetails/BlogDetailsPage.jsx +++ b/src/components/BlogDetails/BlogDetailsPage.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { blogs, categoryColorMap } from "@/data/blogsData"; +import { blogs } from "@/data/blogsData"; import BlogHeader from "./BlogDetailsComponents/BlogHeader"; import BlogComment from "./BlogDetailsComponents/BlogComment"; import BlogCommentForm from "./BlogDetailsComponents/BlogCommentForm"; @@ -18,7 +18,22 @@ const BlogDetailsPage = ({ params }) => { ); } - const { category, title, date, description, author, comments, likes, shares, image } = blog; + const { + category, + color, + title, + date, + author, + comments, + likes, + shares, + image, + paragraph1, + paragraph2, + paragraph3, + quote, + points + } = blog; return (
@@ -26,15 +41,19 @@ const BlogDetailsPage = ({ params }) => {
diff --git a/src/components/Blogs/index.jsx b/src/components/Blogs/index.jsx index 8bcd473..405e33c 100644 --- a/src/components/Blogs/index.jsx +++ b/src/components/Blogs/index.jsx @@ -8,21 +8,6 @@ import { blogs } from "@/data/blogsData"; import CommonBanner from "@/UI/CommonBanner"; import Link from "next/link"; -const categoryColorMap = { - Doctor: "bg-pink-700 text-white", - Medical: "bg-green-700 text-white", - Hospital: "bg-blue-700 text-white", - Technology: "bg-red-700 text-white", - Healthcare: "bg-purple-700 text-white", - Lifestyle: "bg-yellow-700 text-white", - Wellness: "bg-orange-700 text-white", - Science: "bg-cyan-700 text-white", - Research: "bg-gray-700 text-white", - Innovation: "bg-teal-700 text-white", - Pediatrics: "bg-indigo-700 text-white", - Neurology: "bg-lime-700 text-white" -}; - const BlogPage = () => { const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 6; @@ -49,7 +34,8 @@ const BlogPage = () => { comments, likes, shares, - image + image, + color }) => { return (
{ priority /> {category} @@ -98,14 +82,15 @@ const BlogPage = () => { Read More →
-
- - {comments} -
{likes}
+
+ + {comments} +
+
{shares} diff --git a/src/data/blogsData.js b/src/data/blogsData.js index 99091c3..bfc4bfe 100644 --- a/src/data/blogsData.js +++ b/src/data/blogsData.js @@ -1,21 +1,47 @@ -export const categoryColorMap = { - Doctor: "bg-pink-700 text-white", - Medical: "bg-green-700 text-white", - Hospital: "bg-blue-700 text-white", - Technology: "bg-red-700 text-white", - Healthcare: "bg-purple-700 text-white", - Lifestyle: "bg-yellow-700 text-white", - Wellness: "bg-orange-700 text-white", - Science: "bg-cyan-700 text-white", - Research: "bg-gray-700 text-white", - Innovation: "bg-teal-700 text-white", - Pediatrics: "bg-indigo-700 text-white", - Neurology: "bg-lime-700 text-white" -}; +import { alterredUserAvatar } from "@/utils/appHelpers"; +export const comments = [ + { + id: 1, + name: "Robert Smith", + avatar: alterredUserAvatar, + time: "4 Hour Ago", + comment: + "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", + replies: [ + { + id: 11, + name: "Steven Smith", + avatar: alterredUserAvatar, + time: "1 Hour Ago", + comment: + "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable." + } + ] + }, + { + id: 2, + name: "Deni Rover", + avatar: alterredUserAvatar, + time: "6 Hour Ago", + comment: + "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", + replies: [] + }, + { + id: 3, + name: "Robert Smith", + avatar: alterredUserAvatar, + time: "4 Hour Ago", + comment: + "But the majority have suffered alteration in some form, by injected humour, or randomised its words look even slightly believable.", + replies: [] + } +]; export const blogs = [ { id: 1, category: "Doctor", + color: "bg-pink-700 text-white", title: "The Advantages of Virtual Doctor Consultations", date: "10 January 2023", description: @@ -25,25 +51,53 @@ export const blogs = [ likes: 45, shares: 30, image: - "https://media.istockphoto.com/id/2155775525/photo/senior-medical-exam.jpg?s=1024x1024&w=is&k=20&c=7qLMvBRGLq_GQgzhjduRMIlPAtNxT-WFsZd7qKcG6l4=" + "https://media.istockphoto.com/id/2155775525/photo/senior-medical-exam.jpg?s=1024x1024&w=is&k=20&c=7qLMvBRGLq_GQgzhjduRMIlPAtNxT-WFsZd7qKcG6l4=", + paragraph1: + "Virtual consultations provide convenience and accessibility, reducing the need for in-person visits.", + paragraph2: + "Patients in remote areas benefit significantly, accessing specialists without travel.", + paragraph3: + "These services have grown, especially during the pandemic, proving their value in modern healthcare.", + quote: + "“Virtual consultations are not just a trend—they are the future of accessible healthcare.”", + points: [ + "Access specialists from anywhere.", + "Save time and costs on travel.", + "Improved follow-up care through telemedicine.", + "Increased convenience for patients and doctors." + ] }, { id: 2, category: "Medical", - title: "Top Benefits of Telehealth for Families", + color: "bg-green-700 text-white", + title: "How Wearable Devices Are Changing Medical Monitoring", date: "15 February 2023", description: - "Learn how telehealth services provide convenient, affordable, and reliable care for your entire family.", + "Learn how wearable technology is revolutionizing patient health monitoring and diagnosis.", author: "Dr. Smith", comments: 12, likes: 65, shares: 45, image: - "https://media.istockphoto.com/id/1938542779/photo/senior-medical-check-up.jpg?s=612x612&w=0&k=20&c=v-S0_rxA9t6BeZvQWPo64DLHFxO5vVvPww7jObeIh9E=" + "https://media.istockphoto.com/id/1938542779/photo/senior-medical-check-up.jpg?s=612x612&w=0&k=20&c=v-S0_rxA9t6BeZvQWPo64DLHFxO5vVvPww7jObeIh9E=", + paragraph1: + "Wearables like smartwatches and fitness bands are enabling real-time health monitoring.", + paragraph2: + "These devices provide critical data on heart rate, sleep patterns, and more, aiding in early diagnosis.", + paragraph3: "Patients and doctors benefit from continuous health tracking, improving outcomes.", + quote: "“Technology in wearables is a game-changer for preventive healthcare.”", + points: [ + "Real-time data helps in early disease detection.", + "Improves patient engagement in their health.", + "Provides insights for personalized treatments.", + "Enables remote health monitoring for chronic conditions." + ] }, { id: 3, category: "Hospital", + color: "bg-blue-700 text-white", title: "Revolutionizing Hospital Care with AI Technology", date: "20 March 2023", description: @@ -53,11 +107,25 @@ export const blogs = [ likes: 70, shares: 55, image: - "https://images.unsplash.com/photo-1538108149393-fbbd81895907?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + "https://images.unsplash.com/photo-1538108149393-fbbd81895907?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + paragraph1: + "Artificial intelligence is enabling hospitals to deliver faster and more accurate diagnoses.", + paragraph2: + "AI-powered tools streamline administrative workflows, allowing doctors more time for patients.", + paragraph3: + "Machine learning is also aiding in predictive analytics to prevent hospital readmissions.", + quote: "“AI is not replacing human doctors; it’s making them more efficient.”", + points: [ + "Streamlines administrative workflows.", + "Provides accurate and early diagnoses.", + "Enhances hospital management systems.", + "Predicts and prevents readmissions." + ] }, { id: 4, category: "Technology", + color: "bg-red-700 text-white", title: "Emerging Tech Trends in Modern Clinics", date: "5 April 2023", description: @@ -67,11 +135,23 @@ export const blogs = [ likes: 40, shares: 25, image: - "https://images.unsplash.com/photo-1516549655169-df83a0774514?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + "https://images.unsplash.com/photo-1516549655169-df83a0774514?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + paragraph1: "Technological advancements are revolutionizing patient management systems.", + paragraph2: + "Tools like EHRs (Electronic Health Records) and telemedicine apps make clinics more efficient.", + paragraph3: "AI is being integrated to streamline patient diagnosis and treatment plans.", + quote: "“Technology bridges the gap between patient needs and healthcare delivery.”", + points: [ + "Improves patient data management.", + "Enables seamless telemedicine consultations.", + "Increases diagnostic accuracy.", + "Enhances overall patient care." + ] }, { id: 5, category: "Healthcare", + color: "bg-purple-700 text-white", title: "How to Choose the Right Healthcare Plan", date: "12 May 2023", description: @@ -81,11 +161,23 @@ export const blogs = [ likes: 50, shares: 35, image: - "https://images.unsplash.com/photo-1551601651-2a8555f1a136?q=80&w=1447&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + "https://images.unsplash.com/photo-1551601651-2a8555f1a136?q=80&w=1447&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + paragraph1: + "Selecting the right healthcare plan is crucial for financial and physical well-being.", + paragraph2: "Consider factors like coverage, premiums, deductibles, and provider networks.", + paragraph3: "Tailor your choice based on your specific health needs and family requirements.", + quote: "“A healthcare plan is not one-size-fits-all; choose wisely for peace of mind.”", + points: [ + "Understand your medical needs.", + "Compare coverage and premiums.", + "Check the provider network.", + "Review deductibles and out-of-pocket expenses." + ] }, { id: 6, category: "Lifestyle", + color: "bg-yellow-700 text-white", title: "Balancing Work and Health as a Busy Professional", date: "18 June 2023", description: "Tips for maintaining a healthy lifestyle while juggling a demanding career.", @@ -94,11 +186,23 @@ export const blogs = [ likes: 35, shares: 20, image: - "https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + "https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + paragraph1: "Work-life balance is essential to prevent burnout and maintain overall health.", + paragraph2: + "Incorporate regular exercise, healthy eating, and mindfulness into your daily routine.", + paragraph3: "Small, consistent changes can make a significant difference in well-being.", + quote: "“Health is not a luxury—it’s a necessity for peak performance at work.”", + points: [ + "Set boundaries between work and personal life.", + "Adopt a consistent sleep schedule.", + "Incorporate physical activity into your day.", + "Prioritize mental health and stress management." + ] }, { id: 7, category: "Wellness", + color: "bg-orange-700 text-white", title: "The Role of Nutrition in Preventive Healthcare", date: "25 July 2023", description: @@ -108,11 +212,23 @@ export const blogs = [ likes: 25, shares: 18, image: - "https://media.istockphoto.com/id/2086018126/photo/healthy-eating-and-exercising-concept.jpg?s=1024x1024&w=is&k=20&c=_6UX9ZWtMkkrlYbK34tcwn9MjruZrDmm08D_W6l754o=" + "https://media.istockphoto.com/id/2086018126/photo/healthy-eating-and-exercising-concept.jpg?s=1024x1024&w=is&k=20&c=_6UX9ZWtMkkrlYbK34tcwn9MjruZrDmm08D_W6l754o=", + paragraph1: + "A balanced diet reduces the risk of chronic illnesses like diabetes and heart disease.", + paragraph2: "Foods rich in nutrients strengthen the immune system and improve overall health.", + paragraph3: "Preventive healthcare begins with the daily choices you make about food.", + quote: "“Good nutrition is the foundation of a healthy life.”", + points: [ + "Incorporate fruits and vegetables into every meal.", + "Choose whole grains over refined options.", + "Limit processed foods and added sugars.", + "Stay hydrated throughout the day." + ] }, { id: 8, category: "Science", + color: "bg-cyan-700 text-white", title: "Understanding the Future of Genetic Medicine", date: "10 August 2023", description: @@ -122,11 +238,23 @@ export const blogs = [ likes: 30, shares: 10, image: - "https://media.istockphoto.com/id/2148124381/photo/sparkling-dna-helix-structure-in-blue-and-red-high-tech-concept-of-genetic-research.jpg?s=1024x1024&w=is&k=20&c=uq3OeWr6-44Li4CpXoYNqhyHQ86TuBU32QJj9WOGa9s=" + "https://media.istockphoto.com/id/2148124381/photo/sparkling-dna-helix-structure-in-blue-and-red-high-tech-concept-of-genetic-research.jpg?s=1024x1024&w=is&k=20&c=uq3OeWr6-44Li4CpXoYNqhyHQ86TuBU32QJj9WOGa9s=", + paragraph1: "Genetic medicine opens new possibilities for personalized treatments.", + paragraph2: "Advances in CRISPR and gene editing are transforming the medical field.", + paragraph3: + "Research continues to focus on curing inherited disorders through genetic solutions.", + quote: "“The genome is the blueprint of life, and we are learning how to edit it.”", + points: [ + "Offers potential cures for genetic disorders.", + "Enables personalized treatment plans.", + "Supports early detection of inherited diseases.", + "Revolutionizes approaches to chronic illness management." + ] }, { id: 9, category: "Research", + color: "bg-gray-700 text-white", title: "The Impact of Clinical Trials on Modern Healthcare", date: "15 September 2023", description: "Insights into how clinical trials shape the future of medicine.", @@ -135,11 +263,22 @@ export const blogs = [ likes: 20, shares: 12, image: - "https://images.unsplash.com/photo-1486825586573-7131f7991bdd?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + "https://images.unsplash.com/photo-1486825586573-7131f7991bdd?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + paragraph1: "Clinical trials are essential for developing new treatments and ensuring safety.", + paragraph2: "Volunteers play a critical role in advancing medical science and innovation.", + paragraph3: "Every major medical breakthrough starts with rigorous testing through trials.", + quote: "“Clinical trials are the backbone of medical progress.”", + points: [ + "Evaluate the safety of new treatments.", + "Ensure efficacy before public availability.", + "Help researchers understand side effects.", + "Support the development of groundbreaking therapies." + ] }, { id: 10, category: "Pediatrics", + color: "bg-teal-700 text-white", title: "Mental Health Awareness: Breaking the Stigma", date: "10 October 2023", description: "A deep dive into promoting mental well-being and breaking stereotypes.", @@ -148,25 +287,49 @@ export const blogs = [ likes: 55, shares: 40, image: - "https://images.unsplash.com/photo-1690306815535-dbe66a7c6185?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + "https://images.unsplash.com/photo-1690306815535-dbe66a7c6185?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + paragraph1: "Children and teenagers face unique mental health challenges today.", + paragraph2: "Raising awareness is crucial to ensure they receive timely support and care.", + paragraph3: "Breaking stigmas helps foster environments where kids can thrive emotionally.", + quote: "“Mental health is as important as physical health, especially in growing children.”", + points: [ + "Promote open conversations about mental health.", + "Provide access to counseling and resources.", + "Educate families on recognizing early signs.", + "Encourage healthy coping mechanisms." + ] }, { id: 11, category: "Neurology", - title: "How Regular Exercise Improves Overall Health", + color: "bg-indigo-700 text-white", + title: "How Regular Exercise Enhances Brain Function", date: "15 November 2023", description: - "An overview of the benefits of consistent physical activity for your body and mind.", - author: "Fitness Guru", + "Explore the positive impact of physical activity on cognitive function and mental health.", + author: "Neuro Specialist", comments: 8, likes: 60, shares: 50, image: - "https://media.istockphoto.com/id/1869420726/photo/human-brain.jpg?s=1024x1024&w=is&k=20&c=ui2uCTPbWaLU3zoAZz2pHVtM97yRR_2y1PBDMyfiGAw=" + "https://media.istockphoto.com/id/1869420726/photo/human-brain.jpg?s=1024x1024&w=is&k=20&c=ui2uCTPbWaLU3zoAZz2pHVtM97yRR_2y1PBDMyfiGAw=", + paragraph1: + "Exercise stimulates the production of brain-derived neurotrophic factor (BDNF), which supports neural growth and connectivity.", + paragraph2: + "Regular physical activity reduces the risk of neurodegenerative diseases like Alzheimer’s.", + paragraph3: "It also helps improve mood, reduce anxiety, and enhance focus and memory.", + quote: "“A healthy body fuels a healthy mind—exercise is the ultimate brain booster.”", + points: [ + "Improves memory and learning capabilities.", + "Reduces stress and enhances emotional stability.", + "Promotes better sleep and recovery.", + "Supports overall cognitive health and resilience." + ] }, { id: 12, category: "Innovation", + color: "bg-lime-700 text-white", title: "AI in Healthcare: A Game Changer", date: "20 December 2023", description: "Understand how artificial intelligence is reshaping the healthcare landscape.", @@ -175,6 +338,19 @@ export const blogs = [ likes: 80, shares: 60, image: - "https://media.istockphoto.com/id/2154829989/photo/a-doctor-interacting-with-medical-icons-on-a-futuristic-interfac.jpg?s=1024x1024&w=is&k=20&c=x5B3eD84z1nLokUFjEyw4HtZjIILJUQcdKMBraHTMCo=" + "https://media.istockphoto.com/id/2154829989/photo/a-doctor-interacting-with-medical-icons-on-a-futuristic-interfac.jpg?s=1024x1024&w=is&k=20&c=x5B3eD84z1nLokUFjEyw4HtZjIILJUQcdKMBraHTMCo=", + paragraph1: + "Artificial intelligence is revolutionizing diagnostics, treatment planning, and patient monitoring.", + paragraph2: + "AI-powered tools like predictive analytics and virtual health assistants improve healthcare efficiency.", + paragraph3: + "From imaging analysis to robotic surgeries, AI is transforming how care is delivered.", + quote: "“The integration of AI into healthcare is not the future—it’s the present.”", + points: [ + "Enhances diagnostic accuracy.", + "Improves patient outcomes with predictive insights.", + "Streamlines administrative workflows.", + "Supports personalized medicine approaches." + ] } ]; From fd2a670a1526ac3adc3bc94c722278ef18446718 Mon Sep 17 00:00:00 2001 From: Jisan Molla Date: Wed, 1 Jan 2025 21:22:38 +0600 Subject: [PATCH 7/8] i have resolve as all i can possible-solve all the mistakes like destracture and make code readable, clean, reuseable --- src/UI/SocialMediaIcons.jsx | 34 +++++ src/UI/customSVG/ArrowIcon.js | 13 ++ src/UI/customSVG/SearchIcon.js | 18 +++ .../BlogDetailsComponents/BlogComment.jsx | 75 ++++++----- .../BlogDetailsComponents/BlogCommentForm.jsx | 119 +++++++++++++++--- .../BlogDetailsComponents/BlogContent.jsx | 62 +++++---- .../BlogDetailsComponents/BlogHeader.jsx | 63 ++++------ .../BlogDetailsComponents/PostTags.jsx | 13 +- .../BlogDetailsComponents/RecentPost.jsx | 30 ++--- .../SearchAndCategories.jsx | 35 +----- .../BlogDetails/BlogDetailsPage.jsx | 48 +++---- src/data/blogsData.js | 43 +++++++ tailwind.config.js | 15 +++ 13 files changed, 369 insertions(+), 199 deletions(-) create mode 100644 src/UI/SocialMediaIcons.jsx create mode 100644 src/UI/customSVG/ArrowIcon.js create mode 100644 src/UI/customSVG/SearchIcon.js diff --git a/src/UI/SocialMediaIcons.jsx b/src/UI/SocialMediaIcons.jsx new file mode 100644 index 0000000..6b84017 --- /dev/null +++ b/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 ( +
+ {icons.map(({ Icon, link, label }, index) => ( + + + + ))} +
+ ); +}; + +export default SocialMediaIcons; diff --git a/src/UI/customSVG/ArrowIcon.js b/src/UI/customSVG/ArrowIcon.js new file mode 100644 index 0000000..ab676ad --- /dev/null +++ b/src/UI/customSVG/ArrowIcon.js @@ -0,0 +1,13 @@ +const ArrowIcon = () => ( + + + +); + +export default ArrowIcon; diff --git a/src/UI/customSVG/SearchIcon.js b/src/UI/customSVG/SearchIcon.js new file mode 100644 index 0000000..a2bf01e --- /dev/null +++ b/src/UI/customSVG/SearchIcon.js @@ -0,0 +1,18 @@ +const SearchIcon = () => ( + + + +); + +export default SearchIcon; diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx index 7202618..8727349 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogComment.jsx @@ -1,60 +1,75 @@ import React from "react"; import Image from "next/image"; import { comments } from "@/data/blogsData"; +import AppButton from "@/UI/AppButton"; const CommentSection = () => { return (

Total Comment ({comments.length.toString().padStart(2, "0")}) + {/* Total Comment ({convertNumToPad(comments.length)}) */}

- {comments.map((comment) => ( -
+ {comments.map(({ id, name, avatar, time, comment, replies }) => ( +
{/* Parent Comment */}
{`${comment.name}'s
-

{comment.name}

-

{comment.time}

+

{name}

+

{time}

-

{comment.comment}

- +

{comment}

+
{/* Replies */} - {comment.replies.length > 0 && ( + {replies.length > 0 && (
- {comment.replies.map((reply) => ( -
- {`${reply.name}'s -
-
-

{reply.name}

-

{reply.time}

+ {replies.map( + ({ + id: replyId, + name: replyName, + avatar: replyAvatar, + time: replyTime, + comment: replyComment + }) => ( +
+ {`${replyName}'s +
+
+

{replyName}

+

{replyTime}

+
+

{replyComment}

+
-

{reply.comment}

-
-
- ))} + ) + )}
)}
diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx index 4edf0b5..1ae345f 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogCommentForm.jsx @@ -1,18 +1,36 @@ "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; - setForm({ ...form, [name]: value }); + + // 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(); - console.log("Form submitted:", form); + + if (!checkEmailForValid(form.email)) { + setEmailError("Invalid email address"); + return; // Prevent form submission if the email is invalid + } + setForm({ name: "", email: "", comment: "" }); }; @@ -29,14 +47,19 @@ const BlogCommentForm = () => { 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" /> - +
+ + {emailError &&

{emailError}

} +
- - + 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" + } + />
); }; 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 ( +//
+//

Leave a Comment

+//
+//
+// +// +//
+ +// + +// +//
+//
+// ); +// }; + +// export default BlogCommentForm; diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx index d0ae477..6ae2c37 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogContent.jsx @@ -1,17 +1,17 @@ +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 || {}; -const BlogContent = ({ - CheckCircle, - Facebook, - Twitter, - Instagram, - title, - paragraph1, - paragraph2, - paragraph3, - quote, - points -}) => { return (

@@ -19,20 +19,32 @@ const BlogContent = ({

{paragraph1}

-
    - {points.map((point, index) => ( -
  • - - {point} -
    • - ))} -
-
- {quote} -
+ + {/* Render points if available */} + {points.length > 0 && ( +
    + {points.map((point, index) => ( +
  • + {CheckCircle && } + {point} +
    • + ))} +
+ )} + + {/* Render quote if available */} + {quote && ( +
+ {quote} +
+ )} + + {/* Paragraph 2 and 3 */}

{paragraph2}

{paragraph3}

+ + {/* Tagging and social media section */}
{["Appointment", "Doctors", "Health", "Hospital"].map((tag, index) => ( @@ -46,9 +58,7 @@ const BlogContent = ({
Share : - - - +
diff --git a/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx index 1715528..6f6c67f 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/BlogHeader.jsx @@ -1,33 +1,25 @@ import Image from "next/image"; -import { - User, - Calendar, - MessageCircle, - Heart, - Share2, - CheckCircle, - Facebook, - Twitter, - Instagram -} from "react-feather"; +import { User, Calendar, MessageCircle, Heart, Share2 } from "react-feather"; import BlogContent from "./BlogContent"; -const BlogHeader = ({ - category, - color, - title, - date, - author, - comments, - likes, - shares, - image, - paragraph1, - paragraph2, - paragraph3, - quote, - points -}) => { +const BlogHeader = ({ content }) => { + const { + title, + category, + color, + image, + date, + author, + comments, + likes, + shares, + paragraph1, + paragraph2, + paragraph3, + quote, + points + } = content; + return (
- + {category}
@@ -70,18 +64,7 @@ const BlogHeader = ({
- +
); }; diff --git a/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx b/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx index 0515a19..5f1a91a 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/PostTags.jsx @@ -1,20 +1,9 @@ "use client"; +import { tags } from "@/data/blogsData"; import React from "react"; const PostTags = () => { - const tags = [ - "Appointment", - "Doctors", - "Health", - "Best", - "Hospital", - "Laboratory", - "Antibiotics", - "COVID-19", - "Care" - ]; - return (

diff --git a/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx b/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx index 34b417e..bd63aa1 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/RecentPost.jsx @@ -2,29 +2,9 @@ import React from "react"; import Image from "next/image"; +import { posts } from "@/data/blogsData"; const RecentPost = () => { - const posts = [ - { - date: "22 June 2023", - title: "Precious Tips To Help You Get Better.", - image: - "https://media.istockphoto.com/id/2154829989/photo/a-doctor-interacting-with-medical-icons-on-a-futuristic-interfac.jpg?s=1024x1024&w=is&k=20&c=x5B3eD84z1nLokUFjEyw4HtZjIILJUQcdKMBraHTMCo=" - }, - { - date: "22 June 2023", - title: "Your Health Matters: Tips & Tricks.", - image: - "https://media.istockphoto.com/id/1869420726/photo/human-brain.jpg?s=1024x1024&w=is&k=20&c=ui2uCTPbWaLU3zoAZz2pHVtM97yRR_2y1PBDMyfiGAw=" - }, - { - date: "22 June 2023", - title: "Stay Healthy During the Pandemic.", - image: - "https://images.unsplash.com/photo-1690306815535-dbe66a7c6185?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" - } - ]; - return (

@@ -34,7 +14,13 @@ const RecentPost = () => { {posts.map((post, index) => (
  • - {post.title} + {post.title}

    {post.date}

    diff --git a/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx b/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx index 586f717..e742b2f 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx @@ -1,10 +1,11 @@ "use client"; +import { categories } from "@/data/blogsData"; +import ArrowIcon from "@/UI/customSVG/ArrowIcon"; +import SearchIcon from "@/UI/customSVG/SearchIcon"; import React from "react"; const SearchAndCategories = () => { - const categories = ["Urology", "Gynecologist", "Medicine", "Child Care", "Covid Test", "Dentist"]; - return (
    {/* Search Section */} @@ -20,20 +21,7 @@ const SearchAndCategories = () => { type="submit" className="absolute right-2 top-2 text-blue-600 hover:text-blue-800" > - - - +
    @@ -47,20 +35,7 @@ const SearchAndCategories = () => { {categories.map((category, index) => (
  • {category} - - - +
    • ))} diff --git a/src/components/BlogDetails/BlogDetailsPage.jsx b/src/components/BlogDetails/BlogDetailsPage.jsx index ad5a1a0..67e382f 100644 --- a/src/components/BlogDetails/BlogDetailsPage.jsx +++ b/src/components/BlogDetails/BlogDetailsPage.jsx @@ -10,14 +10,6 @@ const BlogDetailsPage = ({ params }) => { const blog = blogs.find((blog) => blog.id.toString() === id); - if (!blog) { - return ( -
    -

    Blog not found

    -
    - ); - } - const { category, color, @@ -33,27 +25,37 @@ const BlogDetailsPage = ({ params }) => { paragraph3, quote, points - } = blog; + } = blog || {}; + + if (!blog) { + return ( +
    +

    Blog not found

    +
    + ); + } return (
    diff --git a/src/data/blogsData.js b/src/data/blogsData.js index bfc4bfe..2aa584c 100644 --- a/src/data/blogsData.js +++ b/src/data/blogsData.js @@ -1,4 +1,47 @@ import { alterredUserAvatar } from "@/utils/appHelpers"; + +export const categories = [ + "Urology", + "Gynecologist", + "Medicine", + "Child Care", + "Covid Test", + "Dentist" +]; + +export const posts = [ + { + date: "22 June 2023", + title: "Precious Tips To Help You Get Better.", + image: + "https://media.istockphoto.com/id/2154829989/photo/a-doctor-interacting-with-medical-icons-on-a-futuristic-interfac.jpg?s=1024x1024&w=is&k=20&c=x5B3eD84z1nLokUFjEyw4HtZjIILJUQcdKMBraHTMCo=" + }, + { + date: "22 June 2023", + title: "Your Health Matters: Tips & Tricks.", + image: + "https://media.istockphoto.com/id/1869420726/photo/human-brain.jpg?s=1024x1024&w=is&k=20&c=ui2uCTPbWaLU3zoAZz2pHVtM97yRR_2y1PBDMyfiGAw=" + }, + { + date: "22 June 2023", + title: "Stay Healthy During the Pandemic.", + image: + "https://images.unsplash.com/photo-1690306815535-dbe66a7c6185?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + } +]; + +export const tags = [ + "Appointment", + "Doctors", + "Health", + "Best", + "Hospital", + "Laboratory", + "Antibiotics", + "COVID-19", + "Care" +]; + export const comments = [ { id: 1, diff --git a/tailwind.config.js b/tailwind.config.js index 483e266..1091bde 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,21 @@ module.exports = { "./src/UI/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}" ], + safelist: [ + "bg-pink-700", + "text-white", + "bg-green-700", + "bg-blue-700", + "bg-red-700", + "bg-purple-700", + "bg-yellow-700", + "bg-orange-700", + "bg-cyan-700", + "bg-gray-700", + "bg-teal-700", + "bg-indigo-700", + "bg-lime-700" + ], theme: { fontFamily: { montserrat: ["var(--font-montserrat)"] From 07703a925457d9799b6b0061facf5df2ffb86860 Mon Sep 17 00:00:00 2001 From: Jisan Molla Date: Thu, 2 Jan 2025 19:04:07 +0600 Subject: [PATCH 8/8] update search icon --- src/UI/customSVG/SearchIcon.js | 18 ------------------ .../SearchAndCategories.jsx | 4 ++-- 2 files changed, 2 insertions(+), 20 deletions(-) delete mode 100644 src/UI/customSVG/SearchIcon.js diff --git a/src/UI/customSVG/SearchIcon.js b/src/UI/customSVG/SearchIcon.js deleted file mode 100644 index a2bf01e..0000000 --- a/src/UI/customSVG/SearchIcon.js +++ /dev/null @@ -1,18 +0,0 @@ -const SearchIcon = () => ( - - - -); - -export default SearchIcon; diff --git a/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx b/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx index e742b2f..254ce75 100644 --- a/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx +++ b/src/components/BlogDetails/BlogDetailsComponents/SearchAndCategories.jsx @@ -2,8 +2,8 @@ import { categories } from "@/data/blogsData"; import ArrowIcon from "@/UI/customSVG/ArrowIcon"; -import SearchIcon from "@/UI/customSVG/SearchIcon"; import React from "react"; +import { Search } from "react-feather"; const SearchAndCategories = () => { return ( @@ -21,7 +21,7 @@ const SearchAndCategories = () => { type="submit" className="absolute right-2 top-2 text-blue-600 hover:text-blue-800" > - +