MetatroncubeSoftwareSolutions/TamilCulturalAssociation
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'team' of https://git.metatroncube.in/MetatroncubeSoftwareSolutions/TamilCulturalAssociation into team

Browse Source
This commit is contained in:
akash 2025-08-13 06:13:10 -07:00
commit 2c4a416ae9
8 changed files with 209 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/page.tsx
View File

@ -38,18 +38,23 @@ export default function Home() {
<AboutSection />
<AdSectionOne />
<ArtAndCultureSection />
<HomeWhyChooseUs />
<AdSectionThree />
<HomeUpcomingEvent />
{/* <HeritageLanguage /> */}
{/* <Food /> */}
<HomeSlogan />
{/* <HomeSlogan /> */}
<HomeCommunitySection />
<AdSectionFive />
<HomeUpcomingEvent />
<HomeWhyChooseUs />
{/* <Section7 /> */}
{/* <FoodSection /> */}
<AdSectionThree />
<AdSectionFive />
<HomePhotoGallerySection />
{/* <HaritageAndLanguage />
<AdSectionFour />

173
components/events/UpcomingEventData.jsx
View File

@ -1,12 +1,109 @@
'use client'
import Link from 'next/link'
import moment from "moment";
import { useState } from "react"
export default function UpcomingEventData() {
const [isTab, setIsTab] = useState(1)
const handleTab = (i) => {
setIsTab(i)
}
const [currentMonth, setCurrentMonth] = useState(moment());
const events = [
{
id: 1,
date: "Sun Jan-14",
time: "05:30 PM",
title: "Thai Pongal 2024",
url: "#",
},
{
id: 2,
date: "Apr 14, 2024",
title: "AGM",
url: "#",
},
{
id: 3,
date: "Jun 22-23, 2024",
title: "KW Multicultural Festival",
url: "#",
},
{
id: 4,
date: "Sun Jul 7, 2024",
time: "10:00 AM",
title: "TCA Picnic – Potlock",
url: "#",
},
{
id: 5,
date: "Jul 27-28, 2024",
title: "South Asian Family Sports Day",
url: "#",
},
{
id: 6,
date: "Aug 23, 2023",
time: "06:30-08:30 PM",
title: "Conestoga College Workshop",
url: "#",
},
{
id: 7,
date: "Aug 23, 2023",
time: "06:30-08:30 PM",
title: "Conestoga College Workshop",
url: "#",
},
{
id: 8,
date: "Sat Oct 26, 2024",
time: "1.00 PM-4.30 PM",
title: "TCA – WPL Deepavali Celebrations",
url: "#",
},
{
id: 9,
date: "Sat Dec 21, 2024",
time: "05:00 PM-09:00 PM",
title: "RIM Park",
url: "#",
},
];
// Get the start and end of the current month
const startOfMonth = currentMonth.clone().startOf("month");
const endOfMonth = currentMonth.clone().endOf("month");
// Generate the calendar days
const daysInMonth = [];
for (let i = 0; i < startOfMonth.day(); i++) {
daysInMonth.push(null); // Adding null for empty days before the start of the month
}
for (let i = 1; i <= endOfMonth.date(); i++) {
daysInMonth.push(moment(currentMonth).date(i));
}
// Function to check if a date has an event
const getEventForDate = (date) => {
const dateString = date?.format("YYYY-MM-DD");
return events.filter(event => event.date === dateString);
};
// Function to navigate to the next/previous month
const handleMonthChange = (direction) => {
setCurrentMonth(currentMonth.clone().add(direction, "months"));
};
return (
<>
@ -22,12 +119,86 @@ export default function UpcomingEventData() {
</div>
</div>
<div className="row">
<div className="col-lg-12" data-aos="fade-up" data-aos-duration={1000}>
<div className="col-12 col-lg-4">
<div className="d-flex justify-content-between align-items-center">
<button
className="vl-btn4"
onClick={() => handleMonthChange(-1)}
>
Prev
</button>
<span className="mx-3 fw-700">
{currentMonth.format("MMMM YYYY")}
</span>
<button
className="vl-btn4"
onClick={() => handleMonthChange(1)}
>
Next
</button>
</div>
<table className="table table-bordered mt-4" style={{ tableLayout: "fixed" }}>
<thead>
<tr>
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => (
<th key={index} className="text-center">
{day}
</th>
))}
</tr>
</thead>
<tbody>
{Array.from({ length: Math.ceil(daysInMonth.length / 7) }, (_, rowIndex) => (
<tr key={rowIndex}>
{daysInMonth.slice(rowIndex * 7, (rowIndex + 1) * 7).map((day, index) => (
<td
key={index}
style={{
cursor: day ? "default" : "not-allowed",
backgroundColor: getEventForDate(day).length > 0 ? "#eac768" : "white", // Highlight event dates
}}
>
{day ? (
<div style={{ width: "100%", height: "100%" }}>
{/* Align day number to the right */}
<span className="text-end d-block">{day.date()}</span>
{/* Display event names if present */}
{/* {getEventForDate(day).map((event, eventIndex) => (
<div
key={eventIndex}
className="text-sm text-white p-1 text-center mt-1"
onClick={() => handleEventClick(event.id)} // Add click handler
style={{
backgroundColor: "#007BFF", // Highlight event with a blue color
borderRadius: "5px",
cursor: "pointer"
}}
>
{event.title}
</div>
))} */}
</div>
) : (
""
)}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<div className="col-lg-8" data-aos="fade-up" data-aos-duration={1000}>
<div className="tab-content" id="pills-tabContent">
<div className={isTab == 1 ? "tab-pane fade show active" : "tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
<div className="event-widget-area">
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">

2
components/home/HomePhotoGallerySection.tsx
View File

@ -76,7 +76,7 @@ export default function HomePhotoGallerySection() {
return (
<>
<div className="bloginner-section-area sp3">
<div className="bloginner-section-area sp4">
<div className="container">
<div className="row">
<div className="col-lg-12 m-auto">

2
components/home/HomeUpcomingEvent.tsx
View File

@ -10,7 +10,7 @@ export default function HomeUpcomingEvent() {
return (
<>
<div className="event3-section-area sp4">
<div className="event3-section-area">
<div className="container">
<div className="row">
<div className="col-lg-12 m-auto">

10
package-lock.json generated
View File

@ -11,6 +11,7 @@
"aos": "^2.3.4",
"axios": "^1.11.0",
"gsap": "^3.12.5",
"moment": "^2.30.1",
"next": "14.2.15",
"react": "^18",
"react-countup": "^6.5.3",
@ -4180,6 +4181,15 @@
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"aos": "^2.3.4",
"axios": "^1.11.0",
"gsap": "^3.12.5",
"moment": "^2.30.1",
"next": "14.2.15",
"react": "^18",
"react-countup": "^6.5.3",

27
public/assets/css/main.css
View File

@ -1390,7 +1390,7 @@ Location:
.vl-btn4 {
color: var(--ztc-text-text-1);
font-family: var(--grotesk);
font-size: var(--ztc-font-size-font-s20);
font-size: var(--ztc-font-size-font-s18);
font-style: normal;
font-weight: var(--ztc-weight-bold);
line-height: 20px;
@ -1400,24 +1400,21 @@ Location:
z-index: 1;
display: inline-block;
border-radius: 8px;
padding: 24px 26px;
background: var(--ztc-bg-bg-9);
padding: 16px 24px;
background: var(--ztc-bg-bg-15);
overflow: hidden;
}
.vl-btn4::after {
position: absolute;
content: "";
height: 100%;
width: 1px;
left: 50%;
top: 0;
height: 4px;
width: 100%;
left: 0;
bottom: 0;
transition: all 0.4s;
background: var(--ztc-bg-bg-8);
background: #D60003;
z-index: -1;
border-radius: 8px;
visibility: hidden;
opacity: 0;
}
.vl-btn4:hover {
@ -1429,10 +1426,7 @@ Location:
width: 100%;
height: 100%;
transition: all 0.4s;
left: 0;
top: 0;
visibility: visible;
opacity: 1;
}
.vl-btn5 {
@ -28477,6 +28471,9 @@ h2.custom-text.aos-init.aos-animate {
}
}
.fw-700{
font-weight:700;
}
@media (max-width: 1920px) and (min-width: 1440px) {
.social-icons ul {
display: flex;

3
utility/constant.utils.js
View File

@ -4632,4 +4632,5 @@ export const heritageLanguage = [
</div>
`
},
];
];