Merge pull request #8 from Ayush272002/fix_adwit

Fix adwit!

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 (
-    <div className="container mx-auto p-4">
-      <div>
+    <>
       <Header />
-        {/* Other page content */}
-      </div>
+      <div className="relative min-h-screen overflow-hidden">
+        {/* Video Background */}
+        {isClient && (
+          <video
+            autoPlay
+            loop
+            muted
+            className="absolute inset-0 w-full h-full object-cover z-0"
+            src="BGVid2.mp4"
+          >
+            Your browser does not support the video tag.
+          </video>
+        )}
+
+        {/* Dark Overlay for Enhanced Readability */}
+        <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
+
+        {/* Page Content Over the Video */}
+        <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-16">
+          <div className="container mx-auto p-4">
+            <input
+              type="text"
+              placeholder="Search events..."
+              className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
+            />
             <main>
               <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">Featured Events</h2>
-          <p className="text-gray-600">No events available at the moment.</p>
+                <h2 className="text-2xl font-semibold text-white mb-4">
+                  Featured Events
+                </h2>
+                <p className="text-gray-300">
+                  No events available at the moment.
+                </p>
               </section>
               <section>
-          <h2 className="text-2xl font-semibold mb-4">Upcoming Events</h2>
-          <ul className="list-disc list-inside">
+                <h2 className="text-2xl font-semibold text-white mb-4">
+                  Upcoming Events
+                </h2>
+                <ul className="list-disc list-inside text-gray-300">
                   <li>Event 1 - Date</li>
                   <li>Event 2 - Date</li>
                   <li>Event 3 - Date</li>
                 </ul>
               </section>
+            </main>
+            <Footer />
+          </div>
+        </div>
+      </div>
+
+      <main>
         <section className="mb-8">
           <Test />
         </section>
@@ -31,6 +74,6 @@ export default function Home() {
         </section>
         <Footer />
       </main>
-    </div>
+    </>
   );
 }

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<Event[]>([]);
+  const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
+
+  useEffect(() => {
+    const eventsData = fetchEvents();
+    setEvents(eventsData);
+  }, []);
+
+  return (
+    <div className="relative min-h-screen overflow-hidden">
+      <Header />
+      {/* Video Background */}
+      <video
+        autoPlay
+        loop
+        muted
+        className="absolute inset-0 w-full h-full object-cover z-0"
+        src="BGVid1.mp4"
+      >
+        Your browser does not support the video tag.
+      </video>
+      {/* Overlay for Readability */}
+      <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
+
+      {/* Main Content */}
+      <div className="relative z-20 container mx-auto p-4 pt-16">
+        <div className="mb-6">
+          <input
+            type="text"
+            placeholder="Search events..."
+            className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
+          />
+          <div className="flex mt-4 space-x-4">
+            <button className="bg-blue-500 text-white px-4 py-2 rounded">
+              Sort
+            </button>
+            <button className="bg-blue-500 text-white px-4 py-2 rounded">
+              Filter
+            </button>
+          </div>
+        </div>
+        <main>
+          <section>
+            <h2 className="text-2xl font-semibold text-white mb-4">
+              Available Events
+            </h2>
+            <div className="grid grid-cols-1 gap-6">
+              {events.map((event) => (
+                <div
+                  key={event.EventID}
+                  className="relative flex bg-white p-4 rounded-lg shadow-lg"
+                  onMouseEnter={() => setHoveredEventId(event.EventID)}
+                  onMouseLeave={() => setHoveredEventId(null)}
+                >
+                  <img
+                    src={event.imageUrl}
+                    alt={event.name}
+                    className="w-1/4 rounded-lg"
+                  />
+                  <div className="ml-4 relative">
+                    <h3 className="text-xl font-bold">{event.name}</h3>
+                    <p className="text-gray-600">{event.date}</p>
+                    <p className="text-gray-600">{event.location}</p>
+                    <p className="text-gray-800 font-semibold">
+                      {event.ticketPrice}
+                    </p>
+                    {event.ticketsSold / event.capacity >= 0.9 && (
+                      <div className="mt-2 p-2 bg-yellow-300 text-black rounded">
+                        Limited Tickets Remaining!
+                      </div>
+                    )}
+                  </div>
+                  <div className="absolute top-0 right-0 flex items-center space-x-2">
+                    {hoveredEventId === event.EventID && (
+                      <div className="top-0 left-4 w-full bg-white p-4 shadow-lg rounded-lg z-10">
+                        <p>{event.description}</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        </main>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default TicketListing;

app/TicketListings/page.tsx

@@ -0,0 +1,9 @@
+import TicketListings from './TicketListings';
+
+export default function Page() {
+  return (
+    <>
+      <TicketListings />
+    </>
+  );
+}

components/WalletAdapter.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
+import React from 'react';
 
 const WalletAdapter = () => {
-  return (
-    <div>WalletAdapter</div>
-  )
-}
+  return <div>WalletAdapter</div>;
+};
 
-export default WalletAdapter
+export default WalletAdapter;

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
 

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<HTMLDivElement>) => {
     setMouseX(e.clientX);
     setMouseY(e.clientY);
   };
 
+  const handleMouseLeave = () => {
+    setMouseX(-1);
+    setMouseY(-1);
+  };
+
   return (
     <div
       className="fixed top-0 left-0 right-0 backdrop-blur-md bg-opacity-60 z-50"
       onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
     >
       <div
         className="absolute inset-0 pointer-events-none"
         style={{
           border: '1px solid transparent',
-          background: `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`,
+          background:
+            mouseX >= 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',
         }}
       ></div>
-      <div className="container mx-auto px-6 py-5 flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-white">Ticket Chain</h1>
+      <div className="container mx-auto px-6 py-4 flex justify-between items-center">
+        <h1 className="text-2xl font-Ariel-bold text-white">TicketChain</h1>
         <nav className="nav">
           <ul className="flex space-x-6">
             <li>
@@ -37,7 +46,7 @@ const Header = () => {
               </Link>
             </li>
             <li>
-              <Link href="/events" legacyBehavior>
+              <Link href="/TicketListings" legacyBehavior>
                 <a className="text-white hover:text-blue-500 transition-colors duration-300">
                   Events
                 </a>