Initial commit - Black Canyon Tickets whitelabel platform
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
155
src/pages/e/[slug].astro
Normal file
155
src/pages/e/[slug].astro
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
export const prerender = false;
|
||||
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import TicketCheckout from '../../components/TicketCheckout.tsx';
|
||||
import { supabase } from '../../lib/supabase';
|
||||
|
||||
const { slug } = Astro.params;
|
||||
|
||||
// Fetch event data with ticket types
|
||||
const { data: event, error } = await supabase
|
||||
.from('events')
|
||||
.select(`
|
||||
*,
|
||||
availability_display_mode,
|
||||
availability_threshold,
|
||||
show_sold_out,
|
||||
low_stock_threshold,
|
||||
availability_messages,
|
||||
organizations (
|
||||
name,
|
||||
logo,
|
||||
platform_fee_type,
|
||||
platform_fee_percentage,
|
||||
platform_fee_fixed
|
||||
),
|
||||
ticket_types (
|
||||
id,
|
||||
name,
|
||||
description,
|
||||
price,
|
||||
quantity_available,
|
||||
quantity_sold,
|
||||
is_active,
|
||||
sale_start_time,
|
||||
sale_end_time,
|
||||
sort_order
|
||||
)
|
||||
`)
|
||||
.eq('slug', slug)
|
||||
.single();
|
||||
|
||||
if (error || !event) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
// Format date for display
|
||||
const eventDate = new Date(event.start_time);
|
||||
const formattedDate = eventDate.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
const formattedTime = eventDate.toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
});
|
||||
---
|
||||
|
||||
<Layout title={`${event.title} - Black Canyon Tickets`}>
|
||||
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
|
||||
<main class="max-w-5xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<div class="bg-white shadow-2xl rounded-2xl overflow-hidden border border-slate-200">
|
||||
<div class="px-6 py-6">
|
||||
<!-- Compact Header -->
|
||||
<div class="bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl p-6 mb-6 text-white">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
{event.organizations.logo && (
|
||||
<img
|
||||
src={event.organizations.logo}
|
||||
alt={event.organizations.name}
|
||||
class="h-12 w-12 rounded-xl mr-4 shadow-lg border-2 border-white/20"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<h1 class="text-2xl font-light mb-1 tracking-wide">{event.title}</h1>
|
||||
<p class="text-slate-200 text-sm font-medium">Presented by {event.organizations.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 border border-white/20">
|
||||
<p class="text-xs text-slate-300 uppercase tracking-wide font-medium">Event Date</p>
|
||||
<p class="text-lg font-semibold text-white">{formattedDate}</p>
|
||||
<p class="text-slate-200 text-sm">{formattedTime}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<div class="bg-gradient-to-br from-slate-50 to-white rounded-xl p-5 border border-slate-200 shadow-lg">
|
||||
<h2 class="text-lg font-semibold text-slate-900 mb-4 flex items-center">
|
||||
<div class="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mr-2"></div>
|
||||
Event Details
|
||||
</h2>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center p-3 bg-white rounded-lg border border-slate-200">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-green-500 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-slate-900">Venue</p>
|
||||
<p class="text-slate-600 text-sm">{event.venue}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center p-3 bg-white rounded-lg border border-slate-200">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-slate-900">Date & Time</p>
|
||||
<p class="text-slate-600 text-sm">{formattedDate} at {formattedTime}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{event.description && (
|
||||
<div class="mt-4 p-4 bg-white rounded-lg border border-slate-200">
|
||||
<h3 class="text-sm font-semibold text-slate-900 mb-2 flex items-center">
|
||||
<div class="w-1 h-1 bg-gradient-to-r from-amber-400 to-orange-500 rounded-full mr-2"></div>
|
||||
About This Event
|
||||
</h3>
|
||||
<p class="text-slate-600 text-sm whitespace-pre-line leading-relaxed">{event.description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bg-gradient-to-br from-slate-50 to-white rounded-xl p-5 border border-slate-200 shadow-lg sticky top-8">
|
||||
<h2 class="text-lg font-semibold text-slate-900 mb-4 flex items-center">
|
||||
<div class="w-2 h-2 bg-gradient-to-r from-emerald-500 to-green-500 rounded-full mr-2"></div>
|
||||
Get Your Tickets
|
||||
</h2>
|
||||
<TicketCheckout event={event} client:load />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user