Spaces:
Running
Running
File size: 2,345 Bytes
88d2f2a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { EventStatusBadge } from "./EventStatusBadge";
import { RealVsMockBadge } from "@/components/shared/RealVsMockBadge";
import type { EventSummary } from "@/lib/api";
import { relativeTime } from "@/lib/utils";
import { ArrowUpRight } from "lucide-react";
export function EventCard({ event }: { event: EventSummary }) {
return (
<Link
href={`/events/${event.id}`}
className="group block focus:outline-none"
aria-label={`Open event ${event.headline}`}
>
<Card className="h-full transition-all duration-200 group-hover:-translate-y-0.5 group-hover:border-primary/40 group-hover:shadow-lg group-hover:shadow-primary/10 group-focus-visible:border-primary group-focus-visible:ring-2 group-focus-visible:ring-ring">
<CardContent className="p-5">
<div className="flex items-start justify-between gap-3">
<div className="flex flex-wrap items-center gap-2">
<RealVsMockBadge mode={event.mode} />
<EventStatusBadge status={event.status} />
{event.marketSymbol && (
<span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">
{event.marketSymbol}
</span>
)}
</div>
<ArrowUpRight
className="h-4 w-4 text-muted-foreground transition-all duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-primary"
aria-hidden
/>
</div>
<h3
dir="auto"
className={
event.headline
? "mt-3 text-base font-semibold leading-snug text-balance"
: "mt-3 text-base font-semibold italic leading-snug text-muted-foreground"
}
>
{event.headline || "(no headline)"}
</h3>
<div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
<span dir="auto">
{event.source || <span className="italic opacity-70">unknown source</span>}
</span>
<span className="font-mono">{relativeTime(event.ingestedAt)}</span>
</div>
</CardContent>
</Card>
</Link>
);
}
|