Event Card

When to use

Reach for EventCard when you need an event preview with a live, time-and-capacity-aware status (registration open, almost full, sold out, happening right now, ended) plus a status-driven CTA. Four layouts: variant="grid" (image-on-top magazine card), variant="feed" (full-bleed image background, white-on-dark content), variant="list" (thumbnail + 4-icon meta + status indicator), and variant="compact" (text-only minimal row for sidebars / widgets).

Minimal example

import { EventCard } from "@/components/event-card";

<EventCard
  event={{
    id: "1",
    title: "Annual Summit",
    type: "Conference",
    date: "2026-07-01",
    time: "09:00 - 18:00",
    location: "Istanbul Conference Center",
    image: "/cover.jpg",
    capacity: 200,
    registered: 50,
  }}
  variant="grid"
  href="/events/1"
/>;

Four variants

• grid — image-on-top magazine card with full meta lines, capacity progress bar, and decorative status CTA at the foot. Renders well in 1/2/3-column responsive grids.
• feed — full-bleed image background, content overlaid white-on-dark. Single-column feed item. No capacity progress bar (intentional — spots-left is shown inline in the meta row instead).
• list— info-rich row with thumbnail: 16/20 px square thumb left, content middle (status badge + type badge + title + 4-icon inline meta row showing date / time / location / spots-left), status-aware right indicator (days-until / pulsing "Live now" / chevron). Featured rows get a left accent border. Use when you want a scannable list with visual context per row.
• compact— text-only minimal row for sidebars / widgets / "upcoming events" tickers. Title + type pill (top-right) + 3 stacked meta lines (date / time / location). NO thumbnail, NO status badge, NO capacity bar. Tightest variant — maximum density per pixel. Pairs naturally with a "See all →" footer link.

Six statuses (auto-derived)

Status flows from the event data + an optional now reference. The card never needs you to set status — it's derived from the event and clock:

• open — registrations available, more than 7 days out.
• upcoming — within 7 days. Amber badge.
• lastSpots — ≥80% capacity hit. Amber badge + spots-left counter flips to text-destructive when ≤5 left.
• ongoing — between start and end. Pulsing badge + live indicator.
• full — capacity reached. Sold-out CTA, button disabled.
• expired — past end date. Card fades to opacity-60 grayscale-30; CTA shows "View details."

Public helper kernel — use status logic without rendering the card

The status helpers are exported alongside the component so consumers can derive status, format dates, and compute days-until without rendering an actual card — for header counters, calendar day-cells, filter logic, deterministic tests:

import {
  EventCard,
  getEventStatus,
  EVENT_STATUS_CONFIG,
  formatEventDate,
  getDaysUntilEvent,
  type EventStatus,
} from "@/components/event-card";

// Header counter
const liveCount = events.filter(
  (e) => getEventStatus(e) === "ongoing",
).length;

// Calendar day cell — pure-helper composition, no card render
function DayCell({ events, day }: { events: EventCardItem[]; day: Date }) {
  const todays = events.filter((e) => sameDay(e.date, day));
  const hasOngoing = todays.some(
    (e) => getEventStatus(e, day) === "ongoing",
  );
  return (
    <div className={hasOngoing ? "bg-accent/30" : ""}>
      {todays.length > 0 && <span>{todays.length}</span>}
    </div>
  );
}

Polymorphic root + custom href

import NextLink from "next/link";

<EventCard
  event={event}
  variant="grid"
  linkComponent={NextLink}
  getHref={(e) => `/etkinlik/${e.slug}`}
/>;

Localized labels + custom date formatter

<EventCard
  event={event}
  variant="grid"
  href={href}
  formatDate={(d) =>
    new Date(d).toLocaleDateString("tr-TR", {
      day: "numeric",
      month: "long",
      year: "numeric",
    })
  }
  labels={{
    open: "Kayıt Açık",
    upcoming: "Yaklaşıyor",
    ctaRegister: "Kayıt Ol",
    daysUntilSuffix: "gün kaldı",
    capacityAriaPrefix: "Kayıtlı",
    capacityAriaSeparator: "/",
    // ... 17 keys total, all optional
  }}
  typeStyles={{
    Konferans: { className: "bg-primary/10 text-primary border-primary/20" },
  }}
/>;

Actions slot — overlay-link pattern

The whole card is a link via the overlay-link pattern. Drop nested interactive buttons (Save / Share / Calendar) into the actions prop — they render at z-10 above the link overlay. Each action button MUST call e.preventDefault() + e.stopPropagation() in its onClick or the click bubbles to the link and navigates. Tab order: card-link → action1 → action2 → next card.

Deterministic now for testing + live clocks

Pass a now Date to make status derivation deterministic. For demos / SSR / screenshot tests, pin nowto a fixed date so events don't silently drift over time. For minute-accurate live status, drive now from a parent setInterval:

function LiveEvents({ events }: { events: EventCardItem[] }) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 60_000);
    return () => clearInterval(id);
  }, []);

  return events.map((e) => (
    <EventCard key={e.id} event={e} variant="grid" href={`/events/${e.id}`} now={now} />
  ));
}

Soft-failure

Only id, title, type, date are required. Missing optional fields gracefully omit:

• No capacity / registered — capacity bar + spots-left counter omitted; status logic skips full / lastSpots states; CTA reverts to plain Register / View Details / Ended.
• No image — tinted placeholder with calendar icon.
• No endDate — falls back to date (single-day event spans 00:00 → 23:59:59).
• No time / location / description — meta line omitted.

Notes

• The CTA at the foot is decorative — clicking it navigates via the wrapping link overlay. To render a REAL register button (registration dialog, in-place form, etc.), drop one in actions.
• Status is derived once at render — no internal setInterval. For live updates, drive now from upstream.
• Helpers (getEventStatus, EVENT_STATUS_CONFIG, formatEventDate, getDaysUntilEvent) are part of the API contract — stable across v0.x.
• Status differentiated by both color AND icon (color-blind safe).
• All transforms + pulse animations gated via motion-safe: — reduced-motion users see static cards.