Compare commits

..

2 Commits

Author SHA1 Message Date
cc1916cb09 blog dynamic 2026-08-20 22:42:19 +05:30
14c92b0d2f blog dynamic 2026-08-14 11:03:31 +05:30
6 changed files with 220 additions and 300 deletions

View File

@ -26,8 +26,9 @@ export default function SingleGallery() {
const getEventGallery = useCallback(async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://api.tamilculturewaterloo.org/api';
const res = await axios.get(
`https://api.tamilculturewaterloo.org/api/event-images/event/${eventId}`
`${API_BASE_URL}/event-images/event/${eventId}`
);
const formatted = res.data?.data?.map((img: any) => ({
id: img.id,
@ -109,10 +110,14 @@ export default function SingleGallery() {
onClick={() => handleImageClick(index)}
>
<img
src={image.src}
src={image.src || '/assets/img/all-images/memory/memory-img4.png'}
alt={image.title || `gallery-${index}`}
loading="lazy"
style={{ width: '100%', height: 'auto' }}
onError={(e: any) => {
e.target.onerror = null;
e.target.src = '/assets/img/all-images/memory/memory-img4.png';
}}
/>
</div>
</div>

View File

@ -1,18 +1,93 @@
'use client'
import { useState } from 'react'
import { useState, useEffect, Suspense } from 'react'
import { useSearchParams } from 'next/navigation'
import ModalVideo from 'react-modal-video'
import "@/node_modules/react-modal-video/css/modal-video.css"
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"
import { recipesList } from "@/utility/constant.utils";
import Link from "next/link"
export default function BlogSingle() {
import axios from 'axios'
interface BlogItem {
id: number;
title: string;
slug: string;
image: string;
description: string;
author: string;
profile: string;
date: string;
}
function BlogSingleContent() {
const [isOpen, setOpen] = useState(false)
const searchParams = useSearchParams();
const currentSlug = searchParams.get('slug');
const currentSlug = searchParams ? searchParams.get('slug') : null;
const [blog, setBlog] = useState<BlogItem | null>(null);
const [recentBlogs, setRecentBlogs] = useState<BlogItem[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchBlogDetails = async () => {
try {
setLoading(true);
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
// Fetch other blogs for "Read More" section and fallback
const listRes = await axios.get(`${API_BASE_URL}/blogs`);
const allBlogs = listRes.data?.success ? listRes.data.data : [];
setRecentBlogs(allBlogs);
if (currentSlug) {
// Fetch current blog details by slug
const detailRes = await axios.get(`${API_BASE_URL}/blogs/slug/${currentSlug}`);
if (detailRes.data && detailRes.data.success) {
setBlog(detailRes.data.data);
}
} else {
// No slug provided, load the most recent blog
if (allBlogs.length > 0) {
setBlog(allBlogs[0]);
}
}
} catch (error) {
console.error("Error fetching blog details:", error);
} finally {
setLoading(false);
}
};
fetchBlogDetails();
}, [currentSlug]);
if (loading) {
return (
<Layout headerStyle={1} footerStyle={1}>
<div style={{ padding: '150px 0', textAlign: 'center' }}>
<div className="spinner-border text-danger" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
</Layout>
);
}
if (!blog) {
return (
<Layout headerStyle={1} footerStyle={1}>
<div style={{ padding: '150px 0', textAlign: 'center' }}>
<h2>Blog post not found</h2>
<div className="space20" />
<Link href="/blog" className="vl-btn3">
<span className="demo">Back to Blogs</span>
</Link>
</div>
</Layout>
);
}
return (
<>
@ -39,64 +114,34 @@ export default function BlogSingle() {
<div className="col-lg-8">
<div className="blog-deatils-content heading2">
<div className="img1">
<img src="/assets/img/all-images/blog/blog-img7.png" alt="" />
<img src={blog.image || "/assets/img/all-images/blog/blog-img7.png"} alt={blog.title} style={{ width: '100%', height: 'auto', maxHeight: '450px', objectFit: 'cover', borderRadius: '10px' }} />
</div>
<div className="space32" />
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
<Link href="#"><img src="/assets/img/icons/calender1.svg" alt="" />{blog.date} <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Gisselle <span> | </span></Link>
<Link href="#"><img src="/assets/img/icons/user1.svg" alt="" />{blog.author} <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/comments1.svg" alt="" />2 Comments</Link>
<Link href="#"><img src="/assets/img/icons/comments1.svg" alt="" />Comments Disabled</Link>
</li>
</ul>
<div className="space18" />
<h2>Step Into the Future of Business with Eventify</h2>
<h2>{blog.title}</h2>
<div className="space16" />
<p>At Eventify 2024, you'll join an exclusive gathering of business leaders and innovators shaping the future their industries. This one-day conference offers dynamic sessions on leadership, technology, and strategy to help you stay ahead in today's competitive market. Whether you're looking to unlock new opportunities or build lasting eventify partnerships, Eventify is where you need to be.</p>
{/* Render rich text from Quill editor safely */}
<div className="blog-rich-text-content" dangerouslySetInnerHTML={{ __html: blog.description }} />
<div className="space48" />
<div className="row">
<div className="col-lg-6 col-md-6">
<div className="img1 image-anime">
<img src="/assets/img/all-images/blog/blog-img8.png" alt="" />
</div>
</div>
<div className="col-lg-6 col-md-6">
<div className="space30 d-md-none d-block" />
<div className="img1 image-anime">
<img src="/assets/img/all-images/blog/blog-img9.png" alt="" />
</div>
</div>
</div>
<div className="space32" />
<h3>Eventify: Your Gateway Strategic Growth</h3>
<div className="space16" />
<p>Fuel an your business growth with actionable insights from world-class experts at Eventify 2024. This premier event brings together forward-thinking professionals to explore the latest trends, technologies, and strategies for success. From keynote speeches to interactive workshops, Eventify provides you with the tools you need.</p>
<div className="space16" />
<p>"Join us at Eventify 2024, where innovation meets opportunity. This conference is the ultimate destination for business leaders seeking to push the boundaries of an what's possible. With sessions on disruptive technologies, leadership trends, and market strategies, you'll walk away with the knowledge and connections to lead.</p>
<div className="space48" />
<div className="video-btn-area">
<div className="img1">
<img src="/assets/img/all-images/blog/blog-img10.png" alt="" />
</div>
<div className="play">
<a onClick={() => setOpen(true)} className="popup-youtube"><i className="fa-solid fa-play" /></a>
</div>
</div>
<div className="space32" />
<h3>Reimagine Business Possibilities Eventify</h3>
<div className="space16" />
<p>"Eventify 2024 is the ultimate destination for professionals eager to stay ahead in the evolving business landscape. This event brings together to innovators, meetup industry leaders, and experts to explore the future of business strategy technology.</p>
<div className="space32" />
<div className="tags-social-area">
<div className="tags">
<h4>Tags:</h4>
<ul>
<li><Link href="/#">#Conferences</Link></li>
<li><Link href="/#" className="m-0">#Meetup</Link></li>
<li><Link href="/#">#TamilCulture</Link></li>
<li><Link href="/#" className="m-0">#Community</Link></li>
</ul>
</div>
<div className="social">
@ -122,7 +167,7 @@ export default function BlogSingle() {
<div className="search-area">
<h3>Search</h3>
<div className="space24" />
<form>
<form onSubmit={(e) => e.preventDefault()}>
<input type="text" placeholder="Search..." />
<button type="submit"><i className="fa-solid fa-magnifying-glass" /></button>
</form>
@ -154,7 +199,7 @@ export default function BlogSingle() {
</div>
<div className="space32" />
<div className="tags-area">
<h3>Popular Hastag</h3>
<h3>Popular Hashtag</h3>
<div className="space12" />
<ul>
<li><Link href="/#">#Conferences</Link></li>
@ -204,7 +249,7 @@ export default function BlogSingle() {
</div>
</div>
<div className="row">
{recipesList
{recentBlogs
.filter(post => post.slug !== currentSlug)
.slice(0, 3)
.map((post) => (
@ -212,23 +257,23 @@ export default function BlogSingle() {
<div key={post.id} className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
<div className="blog4-boxarea">
<div className="img1">
<img src={post.image} alt={post.title} />
<img src={post.image || "/assets/img/all-images/blog/blog-img4.png"} alt={post.title} style={{ width: '100%', height: '240px', objectFit: 'cover' }} />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />{post.date}<span> | </span></Link>
<Link href="#"><img src="/assets/img/icons/calender1.svg" alt="" />{post.date}<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />{post.user}</Link>
<Link href="#"><img src="/assets/img/icons/user1.svg" alt="" />{post.author}</Link>
</li>
</ul>
<div className="space20" />
<Link href={`/community/single-recipes?slug=${post?.slug}`}> {post.title.length > 40 ? `${post.title.slice(0, 40)}...` : post?.title}</Link>
<Link href={`/blog-single`}> {post.title.length > 40 ? `${post.title.slice(0, 40)}...` : post.title}</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<Link href={`/blog-single`} className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
<Link href={`/blog-single`}><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
@ -253,10 +298,10 @@ export default function BlogSingle() {
</div>
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
<Link href="#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
</li>
<li className="m-0">
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
<Link href="#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
</li>
</ul>
</div>
@ -279,10 +324,10 @@ export default function BlogSingle() {
</div>
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
<Link href="#"><img src="/assets/img/icons/calender1.svg" alt="" />30 January 2025 - 6pm to 11:30pm</Link>
</li>
<li className="m-0">
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
<Link href="#"><img src="/assets/img/icons/location1.svg" alt="" />Secret Location In The UK</Link>
</li>
</ul>
</div>
@ -296,3 +341,11 @@ export default function BlogSingle() {
</>
)
}
export default function BlogSingle() {
return (
<Suspense fallback={<div>Loading...</div>}>
<BlogSingleContent />
</Suspense>
)
}

View File

@ -1,9 +1,33 @@
'use client'
import { useState, useEffect } from "react"
import axios from "axios"
import Countdown from '@/components/elements/Countdown'
import Layout from "@/components/layout/Layout"
import Link from "next/link"
export default function Blog() {
const [blogs, setBlogs] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchBlogs = async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
const response = await axios.get(`${API_BASE_URL}/blogs`);
if (response.data && response.data.success) {
setBlogs(response.data.data);
}
} catch (error) {
console.error("Error fetching blogs:", error);
} finally {
setLoading(false);
}
};
fetchBlogs();
}, []);
return (
<>
@ -28,243 +52,67 @@ export default function Blog() {
<div className="bloginner-section-area sp1">
<div className="container">
<div className="row">
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
{loading ? (
<div className="col-12 text-center" style={{ padding: '100px 0' }}>
<div className="spinner-border text-danger" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
) : blogs.length === 0 ? (
<div className="col-12 text-center" style={{ padding: '100px 0' }}>
<h3>No blog posts available at the moment.</h3>
</div>
) : (
blogs.map((blog) => (
<div key={blog.id} className="col-lg-4 col-md-6 mb-4" data-aos="zoom-in" data-aos-duration={800}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/blog/blog-img4.png" alt="" />
<img src={blog.image || "/assets/img/all-images/blog/blog-img4.png"} alt={blog.title} style={{ width: '100%', height: '280px', objectFit: 'cover' }} />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
<Link href="#"><img src="/assets/img/icons/calender1.svg" alt="" />{blog.date || 'No Date'} <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link>
<Link href="#"><img src="/assets/img/icons/user1.svg" alt="" />{blog.author}</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Save soil, save world Projects in 2020</Link>
<Link href={`/blog-single`}>{blog.title}</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<Link href={`/blog-single`} className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/blog/blog-img5.png" alt="" />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Gisselle</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Civil Litigation papers Of Conference</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1200}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/blog/blog-img6.png" alt="" />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Mertie</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Greetings and Opening Event of health</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/memory/memory-img7.png" alt="" />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Eventify 2024: Unlock the Future of Business</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/memory/memory-img8.png" alt="" />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Gisselle</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Where Vision Meetup Connect: Eventify 2024</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1200}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/memory/memory-img9.png" alt="" />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Mertie</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Fuel Your Business Growth at Eventify</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={800}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/memory/memory-img4.png" alt="" />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Beverly</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Ignite Your Business Potential at Eventify</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1000}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/memory/memory-img11.png" alt="" />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Gisselle</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Step Into the Future of Business with Eventify</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
<div className="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-duration={1200}>
<div className="blog4-boxarea">
<div className="img1">
<img src="/assets/img/all-images/memory/memory-img6.png" alt="" />
</div>
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/calender1.svg" alt="" />26 Jan 2025 <span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/user1.svg" alt="" />Mertie</Link>
</li>
</ul>
<div className="space20" />
<Link href="/blog-single">Empowering Business Growth at Eventify</Link>
<div className="space24" />
<Link href="/blog-single" className="readmore">read more <i className="fa-solid fa-arrow-right" /></Link>
<div className="arrow">
<Link href="/blog-single"><i className="fa-solid fa-arrow-right" /></Link>
<Link href={`/blog-single`}><i className="fa-solid fa-arrow-right" /></Link>
</div>
</div>
</div>
</div>
))
)}
<div className="space30" />
{blogs.length > 0 && (
<div className="pagination-area">
<nav aria-label="Page navigation example">
<ul className="pagination">
<li className="page-item">
<Link className="page-link" href="/#" aria-label="Previous">
<Link className="page-link" href="#" aria-label="Previous">
<i className="fa-solid fa-angle-left" />
</Link>
</li>
<li className="page-item"><Link className="page-link active" href="/#">1</Link></li>
<li className="page-item"><Link className="page-link" href="/#">2</Link></li>
<li className="page-item"><Link className="page-link" href="/#">...</Link></li>
<li className="page-item"><Link className="page-link" href="/#">12</Link></li>
<li className="page-item"><Link className="page-link active" href="#">1</Link></li>
<li className="page-item"><Link className="page-link" href="#">2</Link></li>
<li className="page-item"><span className="page-link">...</span></li>
<li className="page-item"><Link className="page-link" href="#">12</Link></li>
<li className="page-item">
<Link className="page-link" href="/#" aria-label="Next">
<Link className="page-link" href="#" aria-label="Next">
<i className="fa-solid fa-angle-right" />
</Link>
</li>
</ul>
</nav>
</div>
)}
</div>
</div>
</div>

View File

@ -15,8 +15,9 @@ export default function PhotoGallerySection() {
const getEvents = async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://api.tamilculturewaterloo.org/api';
const eventRes = await axios.get(
'https://api.tamilculturewaterloo.org/api/events/'
`${API_BASE_URL}/events/`
);
const eventsData = eventRes?.data?.data || [];
@ -94,8 +95,12 @@ export default function PhotoGallerySection() {
<div className="img1">
<Link href={`/photo-gallery/single-gallery?id=${event.id}`}>
<img
src={event.eventimageurl}
src={event.eventimageurl || '/assets/img/all-images/memory/memory-img4.png'}
alt={event.eventtitle}
onError={(e) => {
e.target.onerror = null;
e.target.src = '/assets/img/all-images/memory/memory-img4.png';
}}
/>
</Link>
</div>

View File

@ -148,7 +148,7 @@ export default function UpcomingEventSinglePage({ slug: propSlug }) {
}}
>
<img
src={event.image}
src={event.image || '/assets/img/all-images/memory/memory-img4.png'}
alt={event.title}
style={{
width: "100%",
@ -156,6 +156,10 @@ export default function UpcomingEventSinglePage({ slug: propSlug }) {
height: "auto",
objectFit: "contain",
}}
onError={(e) => {
e.target.onerror = null;
e.target.src = '/assets/img/all-images/memory/memory-img4.png';
}}
/>
</div>
</div>

View File

@ -26,8 +26,9 @@ export default function HomePhotoGallerySection() {
const getEvents = async () => {
try {
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://api.tamilculturewaterloo.org/api';
const eventRes = await axios.get(
'https://api.tamilculturewaterloo.org/api/events/'
`${API_BASE_URL}/events/`
);
const eventsData = eventRes?.data?.data || [];
@ -117,10 +118,14 @@ export default function HomePhotoGallerySection() {
onClick={() => handleImageClick(index)}
>
<img
src={img.src}
src={img.src || '/assets/img/all-images/memory/memory-img4.png'}
alt={img.alt || `gallery-${index}`}
loading="lazy"
style={{ width: '100%', height: 'auto' }}
onError={(e: any) => {
e.target.onerror = null;
e.target.src = '/assets/img/all-images/memory/memory-img4.png';
}}
/>
<h3>{img?.eventtitle}</h3>
</div>