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...

+ )} +
+
+
+ ); +}; + +// Export the component +export default BlogId; diff --git a/src/app/events/[blogid]/styleblog.css b/src/app/events/[blogid]/styleblog.css new file mode 100644 index 0000000..63a057a --- /dev/null +++ b/src/app/events/[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; + +} \ No newline at end of file diff --git a/src/app/events/blog.png b/src/app/events/blog.png new file mode 100644 index 0000000..5e8fafe Binary files /dev/null and b/src/app/events/blog.png differ diff --git a/src/app/events/eventCard.js b/src/app/events/eventCard.js new file mode 100644 index 0000000..6627fac --- /dev/null +++ b/src/app/events/eventCard.js @@ -0,0 +1,27 @@ +// src/components/BlogCard.js +import Link from 'next/link'; +import Image from 'next/image'; +import styles from './Eventcard.module.css'; // Use CSS modules for styles +import { CiCalendar } from "react-icons/ci"; +import { IoLocationOutline } from "react-icons/io5"; +import ReactMarkdown from "react-markdown"; + +const BlogCard = ({ title, img, description, slug, date }) => { + // const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description; + + return ( +
+
+ {title} +
+
+

{title}

+

{" "} {date}

+

{" "} SJA

+

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

+
+
+ ); +}; + +export default BlogCard; diff --git a/src/app/events/page.js b/src/app/events/page.js new file mode 100644 index 0000000..b634039 --- /dev/null +++ b/src/app/events/page.js @@ -0,0 +1,67 @@ +"use client" +import React, { useEffect, useState } from 'react'; +import BlogCard from './eventCard'; +import Footer from '@/components/footer'; +import Navbar from "@/components/Navbar/Navbar"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from '@/components/ui/card'; + +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=events.EventsPage&fields=*'); + const data = await response.json(); + setBlogs(data.items); + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + 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 ( + <> +
+ {blogs.map((blog, index) => { + return ( + <> + + + ) + })} +
+ + ); +}; + +export default BlogList; diff --git a/src/app/team/page.js b/src/app/team/page.js index d5836ac..1cc4729 100644 --- a/src/app/team/page.js +++ b/src/app/team/page.js @@ -114,9 +114,9 @@ const Home = () => { {teamMembers.map((member, index) => (
-
+
Profile { />
+
))}
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 ( <>