3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers. Co-authored-by: Cursor <cursoragent@cursor.com>
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Info } from "lucide-react";
|
|
import type { TicketTier } from "@/content/tickets";
|
|
import { site } from "@/content/site";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
tier: TicketTier;
|
|
serial: string;
|
|
className?: string;
|
|
};
|
|
|
|
export function TicketInclusionsPopover({ tier, serial, className }: Props) {
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"h-8 gap-1.5 rounded-full px-3 text-xs font-medium text-[#1a5c38] hover:bg-[#1a5c38]/8",
|
|
className
|
|
)}
|
|
aria-label={`What's included in ${tier.name}`}
|
|
>
|
|
<Info className="size-3.5 shrink-0" aria-hidden />
|
|
What's included
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
align="start"
|
|
className="w-[min(calc(100vw-2rem),20rem)] border-[#1a5c38]/15 p-0"
|
|
>
|
|
<div className="border-b border-border/80 px-4 py-3">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-[#1a5c38]">
|
|
{tier.name}
|
|
</p>
|
|
<p className="mt-1 text-sm leading-relaxed text-muted-foreground">
|
|
{tier.description}
|
|
</p>
|
|
</div>
|
|
<ul className="space-y-2 px-4 py-3">
|
|
{tier.features.map((feature) => (
|
|
<li key={feature} className="flex gap-2 text-sm text-foreground">
|
|
<span className="font-bold text-[#ffb300]" aria-hidden>
|
|
✓
|
|
</span>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="space-y-1 border-t border-border/80 bg-muted/40 px-4 py-3 text-xs text-muted-foreground">
|
|
<p>
|
|
<span className="font-medium text-foreground">When:</span>{" "}
|
|
{tier.scheduleLabel ?? site.dates.label}
|
|
</p>
|
|
<p>
|
|
<span className="font-medium text-foreground">Where:</span>{" "}
|
|
{site.venue.name}, {site.venue.address}
|
|
</p>
|
|
<p className="font-mono text-[10px] uppercase tracking-wider opacity-70">
|
|
{serial}
|
|
</p>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|