c948179b5b
shared/ → StatusBadge layout/ → Navbar championships/ → ChampionshipCard registrations/ → RegistrationCard, RegistrationTimeline admin/ → UserCard Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import Link from "next/link";
|
|
import { Registration } from "@/types/registration";
|
|
import { StatusBadge } from "@/components/shared/StatusBadge";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
|
|
const STEPS = ["submitted", "form_submitted", "payment_pending", "payment_confirmed", "video_submitted", "accepted"];
|
|
|
|
interface Props {
|
|
registration: Registration;
|
|
}
|
|
|
|
export function RegistrationCard({ registration: r }: Props) {
|
|
const date = r.championship_event_date
|
|
? new Date(r.championship_event_date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })
|
|
: null;
|
|
|
|
const stepIndex = STEPS.indexOf(r.status);
|
|
|
|
return (
|
|
<Link href={`/championships/${r.championship_id}`}>
|
|
<Card className="hover:shadow-md transition-shadow cursor-pointer">
|
|
<CardContent className="p-4 space-y-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div>
|
|
<p className="font-semibold text-gray-900">{r.championship_title ?? "Championship"}</p>
|
|
{r.championship_location && <p className="text-sm text-gray-500">📍 {r.championship_location}</p>}
|
|
{date && <p className="text-sm text-gray-500">📅 {date}</p>}
|
|
</div>
|
|
<StatusBadge status={r.status} type="registration" />
|
|
</div>
|
|
|
|
{/* Progress dots */}
|
|
<div className="flex gap-1.5">
|
|
{STEPS.map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`h-2 flex-1 rounded-full ${
|
|
i <= stepIndex ? "bg-violet-500" : "bg-gray-200"
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|