Community sub menu page structure created
This commit is contained in:
parent
3b7fbfd9a2
commit
6aa743784d
@ -72,9 +72,9 @@ export default function Memories() {
|
||||
<div className="content-area">
|
||||
<p>{event.date}</p>
|
||||
<div className="space12" />
|
||||
<Link href={`photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
|
||||
<Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>{event.title}</Link>
|
||||
<div className="plus">
|
||||
<Link href={`photo-gallery/single-gallery?slug=${event.slug}`}>
|
||||
<Link href={`/photo-gallery/single-gallery?slug=${event.slug}`}>
|
||||
<i className="fa-solid fa-plus" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
99
app/community/cricket-club/page.tsx
Normal file
99
app/community/cricket-club/page.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
'use client';
|
||||
|
||||
import Layout from '@/components/layout/Layout';
|
||||
import { communitySubmenuData } from '@/utility/constant.utils';
|
||||
import Link from 'next/link';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import Lightbox from "yet-another-react-lightbox";
|
||||
import "yet-another-react-lightbox/styles.css";
|
||||
|
||||
|
||||
|
||||
export default function CricketClub() {
|
||||
// Show only images with id 1 to 4
|
||||
const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [index, setIndex] = useState(0);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout headerStyle={1} footerStyle={1}>
|
||||
{/* Header Section */}
|
||||
<div
|
||||
className="inner-page-header"
|
||||
style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 m-auto">
|
||||
<div className="heading1 text-center">
|
||||
<h1>Cricket Club</h1>
|
||||
<div className="space20" />
|
||||
<Link href="/">
|
||||
Home <i className="fa-solid fa-angle-right" /> <span>Community</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bloginner-section-area sp1">
|
||||
<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">
|
||||
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.
|
||||
|
||||
The club is primarily supported by Tamil Cultural Association of Waterloo Region. More info: <a href="mailto:mail@tca.srika.in">mail@tca.srika.in</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row gx-5">
|
||||
<div className="col-lg-12">
|
||||
<div className="row mt-4">
|
||||
{galleryImages.map((img, i) => (
|
||||
<div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
|
||||
<div
|
||||
className="memory-boxarea pl-3"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setIndex(i);
|
||||
setOpen(true);
|
||||
}}
|
||||
>
|
||||
<div className="image" data-aos="zoom-in" data-aos-duration={1000}>
|
||||
<img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{galleryImages.length === 0 && (
|
||||
<div className="col-12 text-center mt-5">
|
||||
<p className="text-muted">No images found for this event.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Lightbox
|
||||
open={open}
|
||||
close={() => setOpen(false)}
|
||||
slides={galleryImages}
|
||||
index={index}
|
||||
/>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -12,7 +12,7 @@ export default function CommunityPage() {
|
||||
|
||||
<Layout headerStyle={1} footerStyle={1}>
|
||||
<div>
|
||||
<div className="inner-page-header" style={{ backgroundImage: 'url(assets/img/bg/header-bg5.png)' }}>
|
||||
<div className="inner-page-header" style={{ backgroundImage: 'url(../assets/img/bg/header-bg5.png)' }}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 m-auto">
|
||||
|
||||
@ -10,7 +10,7 @@ export default function Recipes() {
|
||||
|
||||
<Layout headerStyle={1} footerStyle={1}>
|
||||
<div>
|
||||
<div className="inner-page-header" style={{ backgroundImage: 'url(../assets/img/bg/header-bg13.png)' }}>
|
||||
<div className="inner-page-header" style={{ backgroundImage: 'url(/assets/img/bg/header-bg13.png)' }}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 m-auto">
|
||||
|
||||
@ -265,9 +265,9 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
|
||||
</ul>
|
||||
</div>
|
||||
<div className="btn-area">
|
||||
<div className="search-icon header__search header-search-btn" onClick={handleSearch}>
|
||||
{/* <div className="search-icon header__search header-search-btn" onClick={handleSearch}>
|
||||
<a><img src="/assets/img/icons/search1.svg" alt="" /></a>
|
||||
</div>
|
||||
</div> */}
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/#"><i className="fa-brands fa-facebook-f" /></Link>
|
||||
@ -283,7 +283,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={`header-search-form-wrapper ${isSearch ? 'open' : ''}`}>
|
||||
{/* <div className={`header-search-form-wrapper ${isSearch ? 'open' : ''}`}>
|
||||
<div className="tx-search-close tx-close" onClick={handleSearch}><i className="fa-solid fa-xmark" /></div>
|
||||
<div className="header-search-container">
|
||||
<form role="search" className="search-form">
|
||||
@ -291,7 +291,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
|
||||
<button type="submit" className="search-submit"><img src="/assets/img/icons/search1.svg" alt="" /></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{isSearch && <div className="body-overlay active" onClick={handleSearch} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
8
package-lock.json
generated
8
package-lock.json
generated
@ -20,7 +20,7 @@
|
||||
"slick-carousel": "^1.8.1",
|
||||
"swiper": "^11.1.14",
|
||||
"wowjs": "^1.1.3",
|
||||
"yet-another-react-lightbox": "^3.23.4"
|
||||
"yet-another-react-lightbox": "^3.24.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/aos": "^3.0.7",
|
||||
@ -5939,9 +5939,9 @@
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/yet-another-react-lightbox": {
|
||||
"version": "3.23.4",
|
||||
"resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.23.4.tgz",
|
||||
"integrity": "sha512-q9nlMyCGsizvaPnZ6gFDu3qyMcDpr+3jpQPCBMZyQr62M+xp+TfvypLZJ/UA+3VisNJrd0uDPnGzP4Ugue8DXQ==",
|
||||
"version": "3.24.0",
|
||||
"resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.24.0.tgz",
|
||||
"integrity": "sha512-j3YtwDT+fdBBhxbaxfthHMehXkUj388rpn7knc934H86bJJDBEL/m9WFGdKq2ivT3GaUPF+41GplKFbAv8bOmg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
"slick-carousel": "^1.8.1",
|
||||
"swiper": "^11.1.14",
|
||||
"wowjs": "^1.1.3",
|
||||
"yet-another-react-lightbox": "^3.23.4"
|
||||
"yet-another-react-lightbox": "^3.24.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/aos": "^3.0.7",
|
||||
|
||||
@ -3409,6 +3409,50 @@ export const tamilculture = {
|
||||
]
|
||||
}
|
||||
|
||||
export const communitySubmenuData = [
|
||||
{
|
||||
id: "1",
|
||||
src: "/assets/img/online/membership-2024/tca-mem-1.webp",
|
||||
alt: "membership2024 pics",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
src: "/assets/img/online/membership-2024/tca-mem-2.webp",
|
||||
alt: "membership2024 pics"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
src: "/assets/img/online/membership-2024/tca-mem-3.webp",
|
||||
alt: "membership2024 pics",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
src: "/assets/img/online/membership-2024/tca-mem-4.webp",
|
||||
alt: "membership2024 pics"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
src: "/assets/img/online/membership-2025/tca-mem-1.webp",
|
||||
alt: "membership2025 pics",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
src: "/assets/img/online/membership-2025/tca-mem-2.webp",
|
||||
alt: "membership2025 pics"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
src: "/assets/img/online/membership-2025/tca-mem-3.webp",
|
||||
alt: "membership2025 pics",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
src: "/assets/img/online/membership-2025/tca-mem-4.webp",
|
||||
alt: "membership2025 pics"
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
// export const communityData = {
|
||||
// "2024-2026": {
|
||||
// "Executive Committee": [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user