108 lines
5.3 KiB
TypeScript
108 lines
5.3 KiB
TypeScript
'use client';
|
|
|
|
import Layout from '@/components/layout/Layout';
|
|
import { communitySubmenuData } from '@/utility/constant.utils';
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
import Lightbox from 'yet-another-react-lightbox';
|
|
import 'yet-another-react-lightbox/styles.css';
|
|
|
|
export default function CricketClubClient() {
|
|
|
|
const galleryImages = communitySubmenuData.filter((img: any) => +img.id >= 5 && +img.id <= 8);
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [index, setIndex] = useState(0);
|
|
|
|
return (
|
|
<>
|
|
<Layout headerStyle={1} footerStyle={1}>
|
|
<div
|
|
className="inner-page-header"
|
|
style={{
|
|
backgroundImage: 'url(/assets/img/community/cricket-club/cricket-club-banner.webp)',
|
|
}}
|
|
>
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-12 m-auto">
|
|
<div className="heading1">
|
|
<h1 className="mb-3">Cricket Club</h1>
|
|
<Link href="/" className="text-decoration-none">
|
|
Home <i className="fa-solid fa-angle-right mx-2" />
|
|
<span>Community</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bloginner-section-area sp4">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-12 m-auto">
|
|
<div className="event2-header heading5 space-margin60">
|
|
<h2 className="text-anime-style-3 fw-bold">Tamil Cricket Club Waterloo</h2>
|
|
<div className="space24" />
|
|
<p>
|
|
Waterloo region's Tamil Cricket Club was started in 2018. Venue: Waterloo Park,
|
|
Waterloo, Ontario Canada. Spring/Summer season only. Membership is for Tamil Cultural
|
|
Association of Waterloo Region only.
|
|
<br />
|
|
<br />
|
|
The club is primarily supported by Tamil Cultural Association of Waterloo Region.
|
|
More info:{' '}
|
|
<a href="mailto:mail@tca.srika.in" className="text-primary">
|
|
mail@tca.srika.in
|
|
</a>
|
|
</p>
|
|
<div className="space24" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row gx-4 gy-4">
|
|
{galleryImages.length > 0 ? (
|
|
galleryImages.map((img: any, i: number) => (
|
|
<div
|
|
key={img.id}
|
|
className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
|
|
onClick={() => {
|
|
setIndex(i);
|
|
setOpen(true);
|
|
}}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<div className="memory-boxarea rounded overflow-hidden h-100">
|
|
<div
|
|
className="image"
|
|
data-aos="zoom-in"
|
|
data-aos-duration={1000}
|
|
style={{ borderRadius: 8 }}
|
|
>
|
|
<img
|
|
src={img.src}
|
|
alt={img.alt}
|
|
className="img-fluid w-100"
|
|
style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="col-12 text-center mt-5">
|
|
<p className="text-muted">No images found for this event.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Lightbox open={open} close={() => setOpen(false)} slides={galleryImages} index={index} />
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|