made teams page

next.config.js

@@ -1,8 +1,8 @@
-const withMDX = require('@next/mdx')();
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "export"
+    images: {
+    domains: ['tetragram.codered.cloud'],
+  },
 }
 
-module.exports = nextConfig;
+module.exports = nextConfig

src/app/blogs/Blogcard.js

@@ -1,26 +1,51 @@
+// src/components/BlogCard.js
+/*import Link from 'next/link';
+import styles from './Blogcard.module.css'; // Use CSS modules for styles
+
+const BlogCard = ({ title, blogLink}) => {
+  //const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description;
+
+  return (
+    <div className={styles.blogcontainer}>
+      <div className={styles.blogCard}>
+        <div className={styles.blogDetails}>
+          <h2 className={styles.head}>{title}</h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;
+
+// src/components/BlogCard.js*/
+
+// src/components/BlogCard.js
 import Link from 'next/link';
-//import Image from 'next/image';
+import Image from 'next/image';
 import styles from './Blogcard.module.css'; // Use CSS modules for styles
 
-const BlogCard = ({ title, authors, img, description, slug }) => {
-  // const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description;
+const BlogCard = ({ title, blogger, description, blogid,img }) => {
+  const truncatedDescription = description.length > 300 ? `${description.slice(0, 150)}...` : description;
 
   return (
     <div className={styles.blogcontainer}>
       <div className={styles.blogCard}>
         <div className={styles.blogDetails}>
           <h2 className={styles.head}>{title}</h2>
-          <p className={styles.para}>by {authors}</p>
-          <p className={styles.para}>{description}</p>
+          <p className={styles.para1}>by {blogger}</p>
+          <p className={styles.para}>{truncatedDescription}</p>
+          <br></br>
+          <Link href={`/blogs/${blogid}`} passHref>
+            <div className={styles.readMoreButton}>Read More</div>
+          </Link>
         </div>
         <div className={styles.blogImage}>
-          <img className='w-full object-cover' src={img} alt={title} />
+        <Image src={img} alt="Blog Image" width={500} height={500}/>
         </div>
       </div>
     </div>
   );
 };
 
 export default BlogCard;
-
-// src/components/BlogCard.js

src/app/blogs/Blogcard.module.css

@@ -4,6 +4,7 @@
   flex-direction: column;
   height: fit-content;
   align-items: center;
+  padding: 20px;
 }
 
 .bton {
@@ -33,8 +34,6 @@
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   display: flex;
   transition: transform 0.3s ease-in-out;
-  cursor: pointer;
-  height: 220px;
 }
 
 .blogCcard:hover {
@@ -49,21 +48,41 @@
 
 .blogImage {
   width: 40%; /* Adjusted width for image */
-  height: auto;
+  height: 100%;
   background-color: #ddd;
   background-size: cover;
 }
 
 .head {
   margin-bottom: 10px;
+  font-weight:bold;
   font-size: 1.5rem;
-  color: #333;
+  color:black;
+}
+
+.blogCard:hover {
+  transform: translateY(-5px);
+}
+
+.readMoreButton {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: white;
+  color: #8e44ad; /* Purple color */
+  border: 2px solid #8e44ad; /* Purple color */
+  text-decoration: none;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.readMoreButton:hover {
+  background-color: #8e44ad; /* White background on hover */
+  color: white; /* Purple text on hover */
 }
 
-.para {
+.para1 {
   margin-bottom: 15px;
-  color: #555;
-  font-size: small;
+  font-weight: bold;
+  color: black;
 }
 
 .p:last-child {

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

@@ -0,0 +1,63 @@
+// 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 [blogData, setBlogData] = 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=blog.BlogPage&fields=*');
+        const data = await response.json();
+        console.log("check",data);
+        // Find the blog post with the matching id
+        const matchingBlog = data.items.find(blog => blog.id === parseInt(params.blogid));
+
+        // Update the state with the matching blog data
+        setBlogData(matchingBlog);
+        console.log("blog :",matchingBlog.blog_img_url)
+
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    // Call the fetchData function
+    fetchData();
+  }, [params.id]); // Include params.id in the dependency array to refetch data when id changes
+
+  // 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>
+    </div>
+    <Footer /></>
+  );
+};
+
+// Export the component
+export default BlogId;

src/app/blogs/[blogid]/styleblog.css

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Crimson+Text:ital,wght@1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@900&display=swap');
+
+.blogstyle {
+    font-family: "Montserrat", sans-serif;
+    font-size: 50px;
+    font-weight: bold;
+    font-style: normal;
+    letter-spacing: 0;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-top: 5.4rem;
+}
+
+.blogbody{
+    font-family: "Montserrat", sans-serif;
+
+}

src/app/blogs/page.js

@@ -1,17 +1,51 @@
+/*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';
+import Footer from '@/components/footer';
 import Navbar from "@/components/Navbar/Navbar";
 
 const BlogList = () => {
   const [blogs, setBlogs] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const blogsPerPage = 6;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
         const data = await response.json();
-        console.log(data.items)
         setBlogs(data.items);
       } catch (error) {
         console.error('Error fetching data:', error);
@@ -21,18 +55,31 @@ const BlogList = () => {
     fetchData();
   }, []);
 
+  // Calculate the index range for the current page
+  const indexOfLastBlog = currentPage * blogsPerPage;
+  const indexOfFirstBlog = indexOfLastBlog - blogsPerPage;
+  const currentBlogs = blogs.slice(indexOfFirstBlog, indexOfLastBlog);
+
+  // Function to handle page change
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+  };
+
   return (
-    <div> 
-      {blogs.map((blog, index) => (
+    <div>
+      {currentBlogs.map((blog, index) => (
         <BlogCard
           key={index}
-          title={blog.blog_title}
-          authors={blog.blog_authors}
+          title={blog.title}
+          blogger={blog.blog_authors}
           img={blog.blog_img_url}
-          description={blog.blog_description}
-          slug={blog.blog_slug}
+          description={blog.blog_body}
+          blogid={blog.id}
         />
       ))}
+
+      <br></br>
+      <Footer />
     </div>
   );
 };