96 lines
4.0 KiB
TypeScript
96 lines
4.0 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function Home() {
|
|
const [events, setEvents] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Load all events
|
|
useEffect(() => {
|
|
fetch('/api/events')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
setEvents(data.events || []);
|
|
setLoading(false);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading events:', error);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
|
|
<div className="text-white text-2xl">Loading events...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
|
{/* Background Effects */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-white/5 to-transparent"></div>
|
|
</div>
|
|
|
|
<div className="relative z-10 flex flex-col min-h-screen">
|
|
{/* Header */}
|
|
<header className="p-6 text-center">
|
|
<h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
|
|
🎵 Koncert Jegyek
|
|
</h1>
|
|
<p className="text-xl text-white/80">Válassz egy eseményt</p>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 flex items-center justify-center p-6">
|
|
<div className="w-full max-w-6xl">
|
|
{events.length === 0 ? (
|
|
<div className="text-center text-white/60">
|
|
<div className="text-6xl mb-4">🎪</div>
|
|
<p className="text-xl">Jelenleg nincsenek elérhető események</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{events.map((event) => (
|
|
<Link key={event.id} href={`/event/${event.id}`}>
|
|
<div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20 hover:bg-white/15 transition-all duration-300 hover:scale-105 cursor-pointer">
|
|
<div className="text-center">
|
|
<div className="text-4xl mb-4">🎵</div>
|
|
<h2 className="text-2xl font-bold text-white mb-4">{event.name}</h2>
|
|
<p className="text-white/80 mb-6">{event.description}</p>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center bg-white/5 rounded-xl p-3">
|
|
<span className="text-white/60">Max egyidejű:</span>
|
|
<span className="text-white font-semibold">{event.max_concurrent_users} fő</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center bg-white/5 rounded-xl p-3">
|
|
<span className="text-white/60">Jegytípusok:</span>
|
|
<span className="text-white font-semibold">{event.ticket_types || 0} db</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white py-3 px-6 rounded-2xl font-bold transition-all duration-300">
|
|
🎫 Jegyvásárlás
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="p-4 text-center text-white/40 text-sm">
|
|
WebSocket + JWT alapú várakozási rendszer • Válassz egy eseményt a jegyvásárláshoz
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |