mirror of
https://github.com/0xShay/ticketchain.git
synced 2026-01-11 13:13:25 +00:00
Refactor file structure
This commit is contained in:
67
app/Home.tsx
67
app/Home.tsx
@@ -1,67 +0,0 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Header from '../components/custom/header';
|
||||
import Footer from '../components/custom/footer';
|
||||
|
||||
export default function Home() {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<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 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 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import TicketListings from './TicketListings';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<TicketListings />
|
||||
</>
|
||||
);
|
||||
}
|
||||
75
app/contact/page.tsx
Normal file
75
app/contact/page.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
'use client';
|
||||
import React, { useEffect, useState, useRef } 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; // Should ideally be a Date object for better handling
|
||||
location: string;
|
||||
ticketPrice: number; // Changed to number for sorting
|
||||
description: string;
|
||||
capacity: number;
|
||||
ticketsSold: number;
|
||||
imageUrl: string;
|
||||
host: string; // New field for host
|
||||
}
|
||||
|
||||
// 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',
|
||||
host: 'Music Mania',
|
||||
},
|
||||
{
|
||||
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',
|
||||
host: 'Art Lovers',
|
||||
},
|
||||
{
|
||||
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',
|
||||
host: 'Tech Alliance',
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const ContactPage: React.FC = () => {
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden bg-black">
|
||||
<Header />
|
||||
<div className="relative z-20 container mx-auto p-4 pt-16">
|
||||
{/* implement contact page here */}
|
||||
<p className="text-white">Page to be implemented</p>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactPage;
|
||||
@@ -59,7 +59,7 @@ const fetchEvents = (): Event[] => {
|
||||
];
|
||||
};
|
||||
|
||||
const TicketListing: React.FC = () => {
|
||||
const EventsPage: React.FC = () => {
|
||||
const [events, setEvents] = useState<Event[]>([]);
|
||||
const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||
@@ -340,4 +340,4 @@ const TicketListing: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketListing;
|
||||
export default EventsPage;
|
||||
64
app/page.tsx
64
app/page.tsx
@@ -1,9 +1,67 @@
|
||||
import Home from './Home';
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Header from '../components/custom/header';
|
||||
import Footer from '../components/custom/footer';
|
||||
|
||||
export default function Home() {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<Home />
|
||||
<Header />
|
||||
<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 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 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user