diff --git a/app/Home.tsx b/app/Home.tsx index d013a0d..8ce576a 100644 --- a/app/Home.tsx +++ b/app/Home.tsx @@ -1,28 +1,71 @@ +'use client'; +import { useEffect, useState } from 'react'; import Header from '../components/custom/header'; import Footer from '../components/custom/footer'; import Test from '../components/scripts/Test'; import MetaMask from '../components/scripts/MetaMask'; export default function Home() { + const [isClient, setIsClient] = useState(false); + + useEffect(() => { + setIsClient(true); + }, []); + return ( -
-
-
- {/* Other page content */} + <> +
+
+ {/* Video Background */} + {isClient && ( + + )} + + {/* 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
    • +
+
+
+
+
+
+
-
-

Featured Events

-

No events available at the moment.

-
-
-

Upcoming Events

-
    -
  • Event 1 - Date
    • -
  • Event 2 - Date
    • -
  • Event 3 - Date
    • -
-
@@ -31,6 +74,6 @@ export default function Home() {
-
+ ); } diff --git a/app/TicketListings.tsx b/app/TicketListings.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/app/TicketListings/TicketListings.tsx b/app/TicketListings/TicketListings.tsx new file mode 100644 index 0000000..0ae0c67 --- /dev/null +++ b/app/TicketListings/TicketListings.tsx @@ -0,0 +1,149 @@ +'use client'; +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 = (): Event[] => { + return [ + { + EventID: 1, + name: 'Rock Concert', + 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', + }, + { + EventID: 2, + name: 'Art Expo', + 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', + }, + { + EventID: 3, + name: 'Tech Summit 2023', + 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', + }, + ]; +}; + +const TicketListing: React.FC = () => { + const [events, setEvents] = useState([]); + const [hoveredEventId, setHoveredEventId] = useState(null); + + useEffect(() => { + const eventsData = fetchEvents(); + setEvents(eventsData); + }, []); + + return ( +
+
+ {/* Video Background */} + + {/* Overlay for Readability */} +
+ + {/* Main Content */} +
+
+ +
+ + +
+
+
+
+

+ Available Events +

+
+ {events.map((event) => ( +
setHoveredEventId(event.EventID)} + onMouseLeave={() => setHoveredEventId(null)} + > + {event.name} +
+

{event.name}

+

{event.date}

+

{event.location}

+

+ {event.ticketPrice} +

+ {event.ticketsSold / event.capacity >= 0.9 && ( +
+ Limited Tickets Remaining! +
+ )} +
+
+ {hoveredEventId === event.EventID && ( +
+

{event.description}

+
+ )} +
+
+ ))} +
+
+
+
+
+
+ ); +}; + +export default TicketListing; diff --git a/app/TicketListings/page.tsx b/app/TicketListings/page.tsx new file mode 100644 index 0000000..42e8cd6 --- /dev/null +++ b/app/TicketListings/page.tsx @@ -0,0 +1,9 @@ +import TicketListings from './TicketListings'; + +export default function Page() { + return ( + <> + + + ); +} diff --git a/components/WalletAdapter.tsx b/components/WalletAdapter.tsx index d3ee6d5..aab1488 100644 --- a/components/WalletAdapter.tsx +++ b/components/WalletAdapter.tsx @@ -1,9 +1,7 @@ -import React from 'react' +import React from 'react'; const WalletAdapter = () => { - return ( -
WalletAdapter
- ) -} + return
WalletAdapter
; +}; -export default WalletAdapter \ No newline at end of file +export default WalletAdapter; diff --git a/components/custom/TicketButton.tsx b/components/custom/TicketButton.tsx index 34bd513..0d42a1f 100644 --- a/components/custom/TicketButton.tsx +++ b/components/custom/TicketButton.tsx @@ -1,3 +1,4 @@ +'use client'; import React, { useState } from 'react'; import { Button } from '../ui/button'; // Adjust import path to where your shadcn Button component is located diff --git a/components/custom/header.tsx b/components/custom/header.tsx index 4b60248..6d4c95e 100644 --- a/components/custom/header.tsx +++ b/components/custom/header.tsx @@ -4,29 +4,38 @@ import Link from 'next/link'; import MetaMask from '../scripts/MetaMask'; 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