From 190be48ab0a01921d111af579df6ea9735e8e94e Mon Sep 17 00:00:00 2001
From: Adwit Mukherji <66975870+4dw1tz@users.noreply.github.com>
Date: Fri, 25 Oct 2024 17:56:44 +0100
Subject: [PATCH] Preliminary Structure

---
 app/TicketListings.tsx                |   0
 app/TicketListings/TicketListings.tsx | 109 ++++++++++++++++++++++++++
 app/TicketListings/page.tsx           |  10 +++
 components/custom/header.tsx          |   9 ++-
 4 files changed, 124 insertions(+), 4 deletions(-)
 delete mode 100644 app/TicketListings.tsx
 create mode 100644 app/TicketListings/TicketListings.tsx
 create mode 100644 app/TicketListings/page.tsx

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..4f4e94a
--- /dev/null
+++ b/app/TicketListings/TicketListings.tsx
@@ -0,0 +1,109 @@
+'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';
+
+// Dummy function to fetch events
+const fetchEvents = () => {
+  return [
+    {
+      EventID: 1,
+      name: 'Rock Concert',
+      date: '2023-12-01',
+      location: 'New York City',
+      ticketPrice: '$99',
+      imageUrl: 'https://via.placeholder.com/150',
+    },
+    {
+      EventID: 2,
+      name: 'Art Expo',
+      date: '2023-11-15',
+      location: 'San Francisco',
+      ticketPrice: '$55',
+      imageUrl: 'https://via.placeholder.com/150',
+    },
+    {
+      EventID: 3,
+      name: 'Tech Summit 2023',
+      date: '2023-12-10',
+      location: 'Chicago',
+      ticketPrice: '$250',
+      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<Event[]>([]);
+
+  useEffect(() => {
+    // Simulate fetching the events
+    const eventsData = fetchEvents();
+    setEvents(eventsData);
+  }, []);
+
+  return (
+    <div className="bg-gradient-to-b from-blue-900 to-gray-900 min-h-screen">
+      <Header />
+      <div className="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="flex bg-white p-4 rounded-lg shadow-lg"
+                >
+                  <img
+                    src={event.imageUrl}
+                    alt={event.name}
+                    className="w-1/4 rounded-lg"
+                  />
+                  <div className="ml-4">
+                    <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>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        </main>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default TicketListing;
diff --git a/app/TicketListings/page.tsx b/app/TicketListings/page.tsx
new file mode 100644
index 0000000..46f20a4
--- /dev/null
+++ b/app/TicketListings/page.tsx
@@ -0,0 +1,10 @@
+import { Ticket } from 'lucide-react';
+import TicketListings from './TicketListings';
+
+export default function Page() {
+  return (
+    <>
+      <TicketListings />
+    </>
+  );
+}
diff --git a/components/custom/header.tsx b/components/custom/header.tsx
index 134af8b..741ee63 100644
--- a/components/custom/header.tsx
+++ b/components/custom/header.tsx
@@ -36,10 +36,11 @@ const Header = () => {
               </Link>
             </li>
             <li>
-              <Link href="/events" legacyBehavior>
-                <a className="text-white hover:text-blue-500 transition-colors duration-300">
-                  Events
-                </a>
+              <Link
+                href="/TicketListings"
+                className="text-white hover:text-blue-500 transition-colors duration-300"
+              >
+                Events
               </Link>
             </li>
             <li>