78271ea110
- Add organizer model/API, admin and public organizer pages, meetup cards - Refresh events/home/contact; add calendar dialog and carousel components - Optional Plausible via NEXT_PUBLIC_PLAUSIBLE_* env vars in root layout - Prisma migration, seed updates, baseline-and-migrate script Made-with: Cursor
68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
import Link from "next/link";
|
|
import { MapPin, Clock, ArrowRight } from "lucide-react";
|
|
import { formatMeetupCivilDate } from "@/lib/meetupEventTime";
|
|
|
|
export function MeetupCard({ meetup, muted = false }: { meetup: any; muted?: boolean }) {
|
|
const civil = formatMeetupCivilDate(meetup.date);
|
|
const month = civil?.monthShort ?? "—";
|
|
const day = civil?.day ?? "--";
|
|
const full = civil?.full ?? "";
|
|
return (
|
|
<Link
|
|
href={`/events/${meetup.id}`}
|
|
className={`group flex flex-col bg-zinc-900 border rounded-xl p-6 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200 ${
|
|
muted
|
|
? "border-zinc-800/60 opacity-70 hover:opacity-100 hover:border-zinc-700"
|
|
: "border-zinc-800 hover:border-zinc-700"
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className={`rounded-lg px-3 py-2 text-center shrink-0 min-w-[52px] ${muted ? "bg-zinc-800/60" : "bg-zinc-800"}`}>
|
|
<span className={`block text-[10px] font-bold uppercase tracking-wider leading-none mb-0.5 ${muted ? "text-on-surface-variant/50" : "text-primary"}`}>
|
|
{month}
|
|
</span>
|
|
<span className="block text-2xl font-black leading-none">{day}</span>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h3 className="font-bold text-base leading-snug group-hover:text-primary transition-colors">
|
|
{meetup.title}
|
|
</h3>
|
|
<p className="text-on-surface-variant/60 text-xs mt-1">{full}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{meetup.description && (
|
|
<p className="text-on-surface-variant text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
|
|
{meetup.description}
|
|
</p>
|
|
)}
|
|
|
|
<p className="text-[11px] text-on-surface-variant/50 font-medium uppercase tracking-wide mb-2">
|
|
Organized by{" "}
|
|
<span className="text-on-surface-variant/70 normal-case tracking-normal">
|
|
{meetup.organizer?.name || "Belgian Bitcoin Embassy"}
|
|
</span>
|
|
</p>
|
|
|
|
<div className="flex flex-col gap-1.5 mt-auto pt-4 border-t border-zinc-800/60">
|
|
{meetup.location && (
|
|
<p className="flex items-center gap-1.5 text-xs text-on-surface-variant/60">
|
|
<MapPin size={12} className={`shrink-0 ${muted ? "text-on-surface-variant/40" : "text-primary/60"}`} />
|
|
{meetup.location}
|
|
</p>
|
|
)}
|
|
{meetup.time && (
|
|
<p className="flex items-center gap-1.5 text-xs text-on-surface-variant/60">
|
|
<Clock size={12} className={`shrink-0 ${muted ? "text-on-surface-variant/40" : "text-primary/60"}`} />
|
|
{meetup.time}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<span className={`flex items-center gap-1.5 text-xs font-semibold mt-4 group-hover:gap-2.5 transition-all ${muted ? "text-on-surface-variant/50" : "text-primary"}`}>
|
|
View Details <ArrowRight size={12} />
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|