From 30cdf19b784d442cf4b160a91b6127fe7006abf4 Mon Sep 17 00:00:00 2001 From: Ayush <99096397+ayush4345@users.noreply.github.com> Date: Tue, 27 Feb 2024 01:29:34 +0530 Subject: [PATCH] added events page --- package.json | 1 + pnpm-lock.yaml | 11 +++++ src/app/blogs/Blogcard.js | 25 +--------- src/app/blogs/page.js | 2 +- src/app/events/Eventcard.module.css | 64 ++++++++++++++++++++++++ src/app/events/Eventlist.css | 6 +++ src/app/events/[blogid]/page.js | 63 ++++++++++++++++++++++++ src/app/events/[blogid]/styleblog.css | 18 +++++++ src/app/events/blog.png | Bin 0 -> 409814 bytes src/app/events/eventCard.js | 27 +++++++++++ src/app/events/page.js | 67 ++++++++++++++++++++++++++ src/app/team/page.js | 5 +- src/components/ProjectCard.js | 2 +- src/components/ProjectsPage.js | 2 +- 14 files changed, 264 insertions(+), 29 deletions(-) create mode 100644 src/app/events/Eventcard.module.css create mode 100644 src/app/events/Eventlist.css create mode 100644 src/app/events/[blogid]/page.js create mode 100644 src/app/events/[blogid]/styleblog.css create mode 100644 src/app/events/blog.png create mode 100644 src/app/events/eventCard.js create mode 100644 src/app/events/page.js diff --git a/package.json b/package.json index e7aeaa4..31970a9 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react": "18.2.0", "react-canvas-nest": "^1.1.1", "react-dom": "18.2.0", + "react-icons": "^5.0.1", "react-markdown": "^9.0.1", "react-paginate": "^8.2.0", "tailwind": "^4.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 32d851a..c926e51 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,6 +80,9 @@ dependencies: react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + react-icons: + specifier: ^5.0.1 + version: 5.0.1(react@18.2.0) react-markdown: specifier: ^9.0.1 version: 9.0.1(@types/react@18.2.57)(react@18.2.0) @@ -3961,6 +3964,14 @@ packages: react: 18.2.0 dev: false + /react-icons@5.0.1(react@18.2.0): + resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==} + peerDependencies: + react: '*' + dependencies: + react: 18.2.0 + dev: false + /react-indiana-drag-scroll@2.2.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-+W/3B2OQV0FrbdnsoIo4dww/xpH0MUQJz6ziQb7H+oBko3OCbXuzDFYnho6v6yhGrYDNWYPuFUewb89IONEl/A==} engines: {node: '>=8', npm: '>=5'} diff --git a/src/app/blogs/Blogcard.js b/src/app/blogs/Blogcard.js index 89e016a..ff13dba 100644 --- a/src/app/blogs/Blogcard.js +++ b/src/app/blogs/Blogcard.js @@ -1,26 +1,3 @@ -// 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 ( -
-
-
-

{title}

-
-
-
- ); -}; - -export default BlogCard; - -// src/components/BlogCard.js*/ - -// src/components/BlogCard.js import Link from 'next/link'; import Image from 'next/image'; import styles from './Blogcard.module.css'; // Use CSS modules for styles @@ -37,7 +14,7 @@ const BlogCard = ({ title, authors, img, description, slug, date }) => {

{title}

{date}

by {authors}

-

{description}

+

{description.slice(0, 150) + "... see more"}

); diff --git a/src/app/blogs/page.js b/src/app/blogs/page.js index ed108a8..d021ced 100644 --- a/src/app/blogs/page.js +++ b/src/app/blogs/page.js @@ -75,7 +75,7 @@ const BlogList = () => { return ( <> -
+
{blogs.map((blog, index) => { return ( <> diff --git a/src/app/events/Eventcard.module.css b/src/app/events/Eventcard.module.css new file mode 100644 index 0000000..008fa8f --- /dev/null +++ b/src/app/events/Eventcard.module.css @@ -0,0 +1,64 @@ +.bton { + background-color: purple; + width: fit-content; + color: #fff; + padding: 12px 24px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s; +} + +.bton:hover { + background-color: whitesmoke; + color: purple; +} + +.blogCard { + width: 350px; + height: fit-content; + border: 1px solid #e0e0e0; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + display: flex; + transition: transform 0.3s ease-in-out; + cursor: pointer; + flex-direction: column; + height: 100%; +} + +.blogCcard:hover { + transform: scale(1.02); +} + +.blogDetails { + padding: 20px; + width: 100%; /* Adjusted width for details */ + background-color: #f9f9f9; + height: 100%; +} + +.blogImage { + width: 100%; /* Adjusted width for image */ + height: auto; + background-color: #ddd; + background-size: cover; + height: 200px; +} + +.head { + margin-bottom: 10px; + font-size: 1.2rem; + color: #333; +} + +.para { + color: #555; + font-size: small; +} + +.p:last-child { + margin-bottom: 0; +} diff --git a/src/app/events/Eventlist.css b/src/app/events/Eventlist.css new file mode 100644 index 0000000..7c2eacf --- /dev/null +++ b/src/app/events/Eventlist.css @@ -0,0 +1,6 @@ +.blog-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + \ No newline at end of file diff --git a/src/app/events/[blogid]/page.js b/src/app/events/[blogid]/page.js new file mode 100644 index 0000000..ff4d631 --- /dev/null +++ b/src/app/events/[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 ( + <> + +
+ +
+ {blogData ? ( +
+

{blogData.title}

+ {blogData.blog_body} +
+ ) : ( +

Loading...

+ )} +
+
+
diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js index ba7c73b..78bf72f 100644 --- a/src/components/ProjectCard.js +++ b/src/components/ProjectCard.js @@ -8,7 +8,7 @@ const ProjectCard = ({ project }) => {
{project.project_sig}
{project.title}
-

({project.project_description.slice(0, 250)})

+

({project.project_description.slice(0, 150) + "... see more"})

 diff --git a/src/components/ProjectsPage.js b/src/components/ProjectsPage.js index 77f1331..2c74427 100644 --- a/src/components/ProjectsPage.js +++ b/src/components/ProjectsPage.js @@ -19,7 +19,7 @@ const ProjectsPage = ({ projects }) => { return ( -
+
{currentProjects.map((project) => { return ( <>