-
-
-
-
- Featured Events
-
-
- No events available at the moment.
-
-
-
-
- Upcoming Events
-
-
- - Event 1 - Date
- - Event 2 - Date
- - Event 3 - Date
-
-
-
-
+
+ {/* Video Background */}
+
+
+ {/* Dark Overlay for Enhanced Readability */}
+
+
+ {/* Page Content Over the Video */}
+
+
+
+
+
+
+ Featured Events
+
+
+ No events available at the moment.
+
+
+
+
+ Upcoming Events
+
+
+ - Event 1 - Date
+ - Event 2 - Date
+ - Event 3 - Date
+
+
+
+
+
diff --git a/app/TicketListings/TicketListings.tsx b/app/TicketListings/TicketListings.tsx
index 4f4e94a..0ae0c67 100644
--- a/app/TicketListings/TicketListings.tsx
+++ b/app/TicketListings/TicketListings.tsx
@@ -1,11 +1,23 @@
'use client';
-import React from 'react';
-import Header from '../../components/custom/header'; // Adjust the import path as needed
-import Footer from '../../components/custom/footer'; // Assuming you have a footer component
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import Header from '../../components/custom/header';
+import Footer from '../../components/custom/footer';
+
+// Define the Event interface including new fields
+interface Event {
+ EventID: number;
+ name: string;
+ date: string;
+ location: string;
+ ticketPrice: string;
+ description: string;
+ capacity: number;
+ ticketsSold: number;
+ imageUrl: string;
+}
// Dummy function to fetch events
-const fetchEvents = () => {
+const fetchEvents = (): Event[] => {
return [
{
EventID: 1,
@@ -13,6 +25,9 @@ const fetchEvents = () => {
date: '2023-12-01',
location: 'New York City',
ticketPrice: '$99',
+ description: 'An exhilarating rock concert featuring famous bands.',
+ capacity: 5000,
+ ticketsSold: 4500,
imageUrl: 'https://via.placeholder.com/150',
},
{
@@ -21,6 +36,9 @@ const fetchEvents = () => {
date: '2023-11-15',
location: 'San Francisco',
ticketPrice: '$55',
+ description: 'A showcase of modern art from around the world.',
+ capacity: 300,
+ ticketsSold: 260,
imageUrl: 'https://via.placeholder.com/150',
},
{
@@ -29,33 +47,41 @@ const fetchEvents = () => {
date: '2023-12-10',
location: 'Chicago',
ticketPrice: '$250',
+ description: 'The leading tech summit with top industry speakers.',
+ capacity: 2000,
+ ticketsSold: 1800,
imageUrl: 'https://via.placeholder.com/150',
},
];
};
-interface Event {
- EventID: number;
- name: string;
- date: string;
- location: string;
- ticketPrice: string;
- imageUrl: string;
-}
-
const TicketListing: React.FC = () => {
const [events, setEvents] = useState
([]);
+ const [hoveredEventId, setHoveredEventId] = useState(null);
useEffect(() => {
- // Simulate fetching the events
const eventsData = fetchEvents();
setEvents(eventsData);
}, []);
return (
-
+
-
+ {/* Video Background */}
+
+ {/* Overlay for Readability */}
+
+
+ {/* Main Content */}
+
{
{events.map((event) => (
setHoveredEventId(event.EventID)}
+ onMouseLeave={() => setHoveredEventId(null)}
>
-
+
{event.name}
{event.date}
{event.location}
{event.ticketPrice}
+ {event.ticketsSold / event.capacity >= 0.9 && (
+
+ Limited Tickets Remaining!
+
+ )}
+
+
+ {hoveredEventId === event.EventID && (
+
+ )}
))}
diff --git a/app/TicketListings/page.tsx b/app/TicketListings/page.tsx
index 46f20a4..42e8cd6 100644
--- a/app/TicketListings/page.tsx
+++ b/app/TicketListings/page.tsx
@@ -1,4 +1,3 @@
-import { Ticket } from 'lucide-react';
import TicketListings from './TicketListings';
export default function Page() {
diff --git a/components/custom/header.tsx b/components/custom/header.tsx
index 741ee63..b12df8d 100644
--- a/components/custom/header.tsx
+++ b/components/custom/header.tsx
@@ -3,29 +3,38 @@ import React, { useState } from 'react';
import Link from 'next/link';
const Header = () => {
- const [mouseX, setMouseX] = useState(0);
- const [mouseY, setMouseY] = useState(0);
+ const [mouseX, setMouseX] = useState(-1);
+ const [mouseY, setMouseY] = useState(-1);
const handleMouseMove = (e: React.MouseEvent
) => {
setMouseX(e.clientX);
setMouseY(e.clientY);
};
+ const handleMouseLeave = () => {
+ setMouseX(-1);
+ setMouseY(-1);
+ };
+
return (
= 0 && mouseY >= 0
+ ? `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`
+ : 'none',
backgroundClip: 'padding-box, border-box',
}}
>
-
-
Ticket Chain
+
+
TicketChain