added home blog section

2024-07-30 15:32:47 +01:00
parent 045fe85938
commit f0ccf28fdd
14 changed files with 855 additions and 3 deletions
@@ -0,0 +1,86 @@
+"use client"
+import React, { useEffect, useState } from "react";
+import blogOne from "../../assets/images/blog/1.jpg";
+import BlogData from "../../Services/BlogData";
+
+/**
+ * Fetches blog data from an API and renders the blogs on the page.
+ * Displays a maximum of six blogs on the home page and all blogs on other pages.
+ */
+function Blogs({ pathname }) {
+  const [blogs, setBlogs] = useState([]);
+
+  useEffect(() => {
+    const fetchBlogs = async () => {
+      try {
+        const res = await BlogData();
+        setBlogs(res.data);
+      } catch (err) {
+        console.log("Error loading blogdata", err);
+      }
+    };
+
+    fetchBlogs();
+  }, []);
+
+  const renderBlogs = () => {
+    return blogs?.blogdata?.map((blog, index) => {
+      const options = {
+        weekday: "short",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      };
+      const postDt = new Date(blog.post_date).toLocaleDateString(
+        "en-US",
+        options
+      );
+      const blgImg =
+        blog.meta_value != null
+          ? `${blogs?.blogconfig?.media_url}/${blog.meta_value}`
+          : blogOne;
+
+      return (
+        <div key={blog.id} className="col-lg-4 col-md-6">
+          <div
+            className="appie-blog-item mt-30 wow animated fadeInUp"
+            data-wow-duration="3000ms"
+            data-wow-delay="200ms"
+          >
+            <a href={`/blog/blogdetail/${blog?.id}`} className="thumb">
+              <img 
+                src={blgImg}
+                alt={blog.post_title} 
+                width={370} height={'auto'}
+                // style={{height: 'auto' }}
+              />
+            </a>
+            <div className="content">
+              <div className="blog-meta">
+                <ul>
+                  <li style={{cursor: "pointer"}}>{postDt}</li>
+                </ul>
+              </div>
+              <h3 className="title">
+                <a href={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</a>
+              </h3>
+              <a href={`/blog/blogdetail/${blog?.id}`}>
+                Learn More <i className="fal fa-arrow-right" />
+              </a>
+            </div>
+          </div>
+        </div>
+      );
+    });
+  };
+
+  return (
+    <>
+      <div className="row">
+        {pathname === "/" ? renderBlogs()?.slice(0, 6) : renderBlogs()}
+      </div>
+    </>
+  );
+}
+
+export default Blogs;