major changes in styling

src/app/blogs/Blogcard.js

@@ -6,17 +6,19 @@ const BlogCard = ({ title, authors, img, description, slug, date }) => {
   // const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description;
 
   return (
-    <div className={styles.blogCard}>
-      <div className={styles.blogImage}>
-        <img className='w-full object-cover h-52' src={img} alt={title} />
+    <Link href={`/blogs/${slug}`} >
+      <div className={styles.blogCard} >
+        <div className={styles.blogImage}>
+          <img className='w-full object-cover h-52' src={img} alt={title} />
+        </div>
+        <div className={styles.blogDetails}>
+          <h2 className={`font-semibold ${styles.head}`}>{title}</h2>
+          <p className='font-medium text-xs mb-1'>{date}</p>
+          <p className={`font-medium mb-3 ${styles.para}`}>by {authors}</p>
+          <p className={styles.para}>{description.slice(0, 150) + "... see more"}</p>
+        </div>
       </div>
-      <div className={styles.blogDetails}>
-        <h2 className={`font-semibold ${styles.head}`}>{title}</h2>
-        <p className='font-medium text-xs mb-1'>{date}</p>
-        <p className={`font-medium mb-3 ${styles.para}`}>by {authors}</p>
-        <p className={styles.para}>{description.slice(0, 150) + "... see more"}</p>
-      </div>
-    </div>
+    </Link>
   );
 };
 

src/app/blogs/Blogcard.module.css

@@ -16,7 +16,7 @@
 }
 
 .blogCard {
-  width: 350px;
+  width: 320px;
   height: fit-content;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
@@ -29,6 +29,12 @@
   height: 100%;
 }
 
+@media screen and (max-width: 350px) {
+  .blogCard {
+    width: 100%;
+  }
+}
+
 .blogCcard:hover {
   transform: scale(1.02);
 }

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

@@ -21,13 +21,13 @@ const BlogId = ({ params }) => {
         // Fetch data from the API
         const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
         const data = await response.json();
-        console.log("check",data);
+        console.log("check", data);
         // Find the blog post with the matching id
-        const matchingBlog = data.items.find(blog => blog.id === parseInt(params.blogid));
-
+        const matchingBlog = data.items.find(blog => blog?.meta.slug === params.blogid);
+        console.log("matchingBlog", data.items[0]);
         // Update the state with the matching blog data
         setBlogData(matchingBlog);
-        console.log("blog :",matchingBlog.blog_img_url)
+        console.log("blog :", matchingBlog.blog_img_url)
 
       } catch (error) {
         console.error('Error fetching data:', error);
@@ -36,26 +36,54 @@ const BlogId = ({ params }) => {
 
     // Call the fetchData function
     fetchData();
-  }, [params.id]); // Include params.id in the dependency array to refetch data when id changes
+  }, [params.blogid]); // Include params.id in the dependency array to refetch data when id changes
+  console.log(blogData?.blog_tags.split(","))
+
+  let inputDate = blogData?.published_on;
+  let dateObj = new Date(inputDate);
+  let day = dateObj.getDate();
+  let month = dateObj.toLocaleString('default', { month: 'short' });
+  let year = dateObj.getFullYear();
+
+  let formattedDate = `${day} ${month} ${year}`;
 
   // Render the component
   return (
     <>
-
-    <div className="min-h-screen bg-rose-100 flex items-center justify-center">
-
-      <div className="max-w-4xl w-full">
-        {blogData ? (
-          <div>
-            <h2 className=" mb-2 text-center blogstyle">{blogData.title}</h2>
-          <ReactMarkdown className="prose pt-3  text-black blogbody p-8 rounded-md shadow-xl z-10">{blogData.blog_body}</ReactMarkdown>
-          </div>
-        ) : (
-          <p>Loading...</p>
-        )}
+
+      <div className="mt-14 pb-10 min-h-screen flex items-center justify-center">
+        <div className="w-full">
+          {blogData ? (
+            <div >
+              <section className="w-full bg-[#461461] mb-10">
+                <div className=" flex flex-col text-white py-6 mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg lg:pt-16">
+                  <div className="flex flex-wrap gap-2">
+                    {blogData?.blog_tags.split(",").map((data, index) => {
+                      return (
+                        <span key={index} className="px-2 py-1 bg-purple-600/40 rounded-full">{data}</span>
+                      )
+                    }
+                    )}
+                  </div>
+                  <div className="text-xl text-white font-bold font-sans mt-4">
+                    {blogData.title}
+                  </div>
+                  <div className="text-xl text-gray-300 font-thin font-sans mt-2">
+                    {blogData.blog_description}
+                  </div>
+                  <div className="text-xl text-purple-200/90 font-medium font-sans mt-6 flex justify-between items-center">
+                    <span>{blogData.blog_authors}</span><span className=" border-l-4 pl-2 border-purple-200/90">{formattedDate}</span>
+                  </div>
+                </div>
+              </section>
+              <ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{blogData.blog_body}</ReactMarkdown>
+            </div>
+          ) : (
+            <p>Loading...</p>
+          )}
+        </div>
       </div>
-    </div>
-    <Footer /></>
+    </>
   );
 };
 

src/app/blogs/page.js

@@ -1,35 +1,3 @@
-/*import BlogCard from './Blogcard';
-import Navbar from "@/components/Navbar/Navbar";
-
-const BlogList = () => {
-  return (
-    <div>
-     <Navbar />
-     <BlogCard 
-       title="React Blogging App"
-       blogger="John Doe"
-       Img="./blog.png"
-       blogLink="https://example.com/blog-post"
-       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-     />
-     <BlogCard 
-       title="React Blogging App"
-       blogger="John Doe"
-       blogLink="https://example.com/blog-post"
-       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-     />
-     <BlogCard 
-       title="React Blogging App"
-       blogger="John Doe"
-       blogLink="https://example.com/blog-post"
-       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-     />
-     </div>
-  );
-};
-
-export default BlogList;*/
-
 "use client"
 import React, { useEffect, useState } from 'react';
 import BlogCard from './Blogcard';
@@ -75,22 +43,29 @@ const BlogList = () => {
 
   return (
     <>
-      <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3 2xl:grid-cols-4'>
-        {blogs.map((blog, index) => {
-          return (
-            <>
-              <BlogCard
-                key={index}
-                title={blog.blog_title}
-                authors={blog.blog_authors}
-                img={blog.blog_img_url}
-                description={blog.blog_description}
-                slug={blog.blog_slug}
-                date={blog.published_on}
-              />
-            </>
-          )
-        })}
+      <div className='mt-14 min-h-[90vh]'>
+        <section className="w-full bg-[#461461]">
+          <div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
+            Blog
+          </div>
+        </section>
+        <section className='py-6 p-5 md:p-8 grid justify-items-center gap-5 grid-cols-1 md:grid-cols-2 xl:px-20 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-max'>
+          {blogs.map((blog, index) => {
+            return (
+              <>
+                <BlogCard
+                  key={index}
+                  title={blog.blog_title}
+                  authors={blog.blog_authors}
+                  img={blog.blog_img_url}
+                  description={blog.blog_description}
+                  slug={blog.meta.slug}
+                  date={blog.published_on}
+                />
+              </>
+            )
+          })}
+        </section>
       </div>
     </>
   );

src/app/events/Eventcard.module.css

@@ -16,7 +16,7 @@
 }
 
 .blogCard {
-  width: 350px;
+  width: 320px;
   height: fit-content;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
@@ -29,6 +29,12 @@
   height: 100%;
 }
 
+@media screen and (max-width: 350px) {
+  .blogCard {
+    width: 100%;
+  }
+}
+
 .blogCcard:hover {
   transform: scale(1.02);
 }

src/app/events/[eventid]/page.js

@@ -0,0 +1,88 @@
+// Import necessary modules
+"use client"
+import { useEffect, useState } from "react";
+import Navbar from "@/components/Navbar/Navbar";
+import Footer from "@/components/footer";
+import ReactMarkdown from "react-markdown";
+import './styleblog.css'
+// Import Tailwind CSS classes
+import 'tailwindcss/tailwind.css';
+
+// Component definition
+const BlogId = ({ params }) => {
+  console.log(params.blogid)
+  // State to store the fetched data
+  const [eventData, setEventData] = useState(null);
+
+  // Effect to fetch data when the component mounts
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Fetch data from the API
+        const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=events.EventsPage&fields=*');
+        const data = await response.json();
+        // Find the blog post with the matching id
+        const matchingBlog = data.items.find(blog => blog?.meta.slug === params.eventid);
+        // Update the state with the matching blog data
+        setEventData(matchingBlog);
+
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    // Call the fetchData function
+    fetchData();
+  }, [params.blogid]); // Include params.id in the dependency array to refetch data when id changes
+  console.log(eventData?.event_tags.split(","))
+
+  let inputDate = eventData?.event_date;
+  let dateObj = new Date(inputDate);
+  let day = dateObj.getDate();
+  let month = dateObj.toLocaleString('default', { month: 'short' });
+  let year = dateObj.getFullYear();
+
+  let formattedDate = `${day} ${month} ${year}`;
+
+  // Render the component
+  return (
+    <>
+
+      <div className="mt-14 pb-10 min-h-screen flex items-center justify-center">
+        <div className="w-full">
+          {eventData ? (
+            <div >
+              <section className="w-full bg-[#461461] mb-10">
+                <div className=" flex flex-col text-white py-6 mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg lg:pt-10">
+                  <div className="flex flex-wrap gap-2">
+                    {eventData?.event_tags.split(",").map((data, index) => {
+                      return (
+                        <span key={index} className="px-2 py-1 bg-purple-600/40 rounded-full">{data}</span>
+                      )
+                    }
+                    )}
+                  </div>
+                  <div className="text-xl text-white font-bold font-sans mt-4">
+                    {eventData.title}
+                  </div>
+                  <div className="rounded-lg overflow-hidden w-[100%] mx-auto mt-6">
+                    <img src={eventData.event_img_url}/>
+                  </div>
+                  <div className="text-xl text-purple-200/90 font-medium font-sans mt-6 flex justify-between items-center">
+                    <span>{eventData.event_organizer}</span><span className=" border-l-4 pl-2 border-purple-200/90">{formattedDate}</span>
+                  </div>
+                </div>
+              </section>
+              <ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{eventData.event_body}</ReactMarkdown>
+            </div>
+          ) : (
+            <p>Loading...</p>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+// Export the component
+export default BlogId;