Enhance event details UI and add date/time format utilities
Refactor event details page with a modernized design using cards, badges, and icons, improving user experience and accessibility. Introduce robust utilities in `/lib/utils.ts` for formatting dates and
This commit is contained in:
@@ -2,8 +2,27 @@
|
|||||||
|
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useParams } from "next/navigation";
|
import { useParams } from "next/navigation";
|
||||||
import Navbar from "@/components/layout/navbar";
|
import Link from "next/link";
|
||||||
import { useEvents } from "@/context/event-context";
|
import { useEvents } from "@/context/event-context";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
CalendarIcon,
|
||||||
|
ClockIcon,
|
||||||
|
LinkIcon,
|
||||||
|
Loader2Icon,
|
||||||
|
MailIcon,
|
||||||
|
MapPinIcon,
|
||||||
|
PhoneIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
export default function EventDetailPage() {
|
export default function EventDetailPage() {
|
||||||
const { slug } = useParams<{ slug: string }>();
|
const { slug } = useParams<{ slug: string }>();
|
||||||
@@ -15,37 +34,267 @@ export default function EventDetailPage() {
|
|||||||
|
|
||||||
if (isLoadingEvent) {
|
if (isLoadingEvent) {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="flex items-center justify-center min-h-[50vh]">
|
||||||
<Navbar />
|
<Loader2Icon className="h-8 w-8 animate-spin text-blue-500" />
|
||||||
<div className="container">Loading event...</div>
|
<span className="ml-2">Loading event details...</span>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (eventError) {
|
if (eventError) {
|
||||||
return (
|
return (
|
||||||
<>
|
<Card className="max-w-3xl mx-auto">
|
||||||
<Navbar />
|
<CardHeader>
|
||||||
<div className="container">Error: {eventError.message}</div>
|
<CardTitle className="text-red-500">Error</CardTitle>
|
||||||
</>
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p>There was a problem loading the event: {eventError.message}</p>
|
||||||
|
<Button asChild className="mt-4">
|
||||||
|
<Link href="/dashboard">Return to Dashboard</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!event) {
|
if (!event) {
|
||||||
return (
|
return (
|
||||||
<>
|
<Card className="max-w-3xl mx-auto">
|
||||||
<Navbar />
|
<CardHeader>
|
||||||
<div className="container">Event not found!</div>
|
<CardTitle>Event Not Found</CardTitle>
|
||||||
</>
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p>
|
||||||
|
The event you're looking for doesn't exist or may have been removed.
|
||||||
|
</p>
|
||||||
|
<Button asChild className="mt-4">
|
||||||
|
<Link href="/dashboard">Return to Dashboard</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div>
|
||||||
<div className="container">
|
<header className="mb-8">
|
||||||
<h1>{event.title}</h1>
|
<h1 className="text-4xl font-bold tracking-tight">{event.title}</h1>
|
||||||
<p>{event.description}</p>
|
<div className="mt-2 flex items-center gap-2">
|
||||||
|
{event.is_public ? (
|
||||||
|
<Badge variant="default">Public</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="secondary">Private</Badge>
|
||||||
|
)}
|
||||||
|
{event.is_active && (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-green-50 text-green-700 border-green-200"
|
||||||
|
>
|
||||||
|
Active
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{event.rsvp_enabled && (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-blue-50 text-blue-700 border-blue-200"
|
||||||
|
>
|
||||||
|
RSVP Enabled
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{event.gift_registry_enabled && (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-purple-50 text-purple-700 border-purple-200"
|
||||||
|
>
|
||||||
|
Gift Registry
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<Card className="md:col-span-2">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Event Details</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{event.description && (
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium mb-2">About</h3>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">
|
||||||
|
{event.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium mb-2">Date & Time</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CalendarIcon className="h-4 w-4 text-gray-500" />
|
||||||
|
<span>{new Date(event.event_date).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(event.event_start_time || event.event_end_time) && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ClockIcon className="h-4 w-4 text-gray-500" />
|
||||||
|
<span>
|
||||||
|
{event.event_start_time && (
|
||||||
|
<>
|
||||||
|
{new Date(event.event_start_time).toLocaleTimeString(
|
||||||
|
[],
|
||||||
|
{
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{event.event_start_time && event.event_end_time && " - "}
|
||||||
|
{event.event_end_time && (
|
||||||
|
<>
|
||||||
|
{new Date(event.event_end_time).toLocaleTimeString(
|
||||||
|
[],
|
||||||
|
{
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}{" "}
|
||||||
|
<span className="text-sm text-gray-500">
|
||||||
|
({event.timezone})
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{event.rsvp_deadline && (
|
||||||
|
<div className="mt-2">
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="bg-yellow-50 text-yellow-700 border-yellow-200"
|
||||||
|
>
|
||||||
|
RSVP by{" "}
|
||||||
|
{new Date(event.rsvp_deadline).toLocaleDateString()}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(event.location_name || event.location_address) && (
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium mb-2">Location</h3>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{event.location_name && (
|
||||||
|
<p className="font-medium">{event.location_name}</p>
|
||||||
|
)}
|
||||||
|
{event.location_address && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPinIcon className="h-4 w-4 text-gray-500" />
|
||||||
|
<span>{event.location_address}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{event.location_url && (
|
||||||
|
<div className="mt-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
asChild
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={event.location_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<LinkIcon className="h-4 w-4" />
|
||||||
|
View Map
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Contact Information</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{event.contact_email || event.contact_phone ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{event.contact_email && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MailIcon className="h-4 w-4 text-gray-500" />
|
||||||
|
<a
|
||||||
|
href={`mailto:${event.contact_email}`}
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
{event.contact_email}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{event.contact_phone && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<PhoneIcon className="h-4 w-4 text-gray-500" />
|
||||||
|
<a
|
||||||
|
href={`tel:${event.contact_phone}`}
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
{event.contact_phone}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500 text-sm">
|
||||||
|
No contact information provided
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{event.rsvp_enabled && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>RSVP</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Let the host know if you'll be attending
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardFooter>
|
||||||
|
<Button asChild className="w-full">
|
||||||
|
<Link href={`/events/${event.slug}/rsvp`}>RSVP Now</Link>
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{event.gift_registry_enabled && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Gift Registry</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
View gift suggestions for this event
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardFooter>
|
||||||
|
<Button variant="outline" asChild className="w-full">
|
||||||
|
<Link href={`/events/${event.slug}/gifts`}>
|
||||||
|
View Gift Registry
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,67 @@
|
|||||||
import { clsx, type ClassValue } from "clsx"
|
import { clsx, type ClassValue } from "clsx";
|
||||||
import { twMerge } from "tailwind-merge"
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs))
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
|
// in /lib/utils.ts
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats a date string or Date object into a human-readable date/time format
|
||||||
|
*
|
||||||
|
* @param dateString - ISO date string or Date object to format
|
||||||
|
* @param options - Intl.DateTimeFormatOptions to customize the formatting
|
||||||
|
* @returns Formatted date/time string
|
||||||
|
*/
|
||||||
|
export function formatDateTime(
|
||||||
|
dateString: string | Date | undefined | null,
|
||||||
|
options: Intl.DateTimeFormatOptions = {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
},
|
||||||
|
): string {
|
||||||
|
if (!dateString) return "";
|
||||||
|
|
||||||
|
try {
|
||||||
|
const date =
|
||||||
|
typeof dateString === "string" ? new Date(dateString) : dateString;
|
||||||
|
|
||||||
|
// Check if the date is valid
|
||||||
|
if (isNaN(date.getTime())) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Intl.DateTimeFormat("en-US", options).format(date);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error formatting date:", error);
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats a date string or Date object as a date only
|
||||||
|
*/
|
||||||
|
export function formatDate(
|
||||||
|
dateString: string | Date | undefined | null,
|
||||||
|
): string {
|
||||||
|
return formatDateTime(dateString, {
|
||||||
|
year: "numeric",
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats a date string or Date object as time only
|
||||||
|
*/
|
||||||
|
export function formatTime(
|
||||||
|
dateString: string | Date | undefined | null,
|
||||||
|
): string {
|
||||||
|
return formatDateTime(dateString, {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user