feat: organizers, meetups UI, Plausible analytics, and migration tooling
- 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
This commit is contained in:
80
frontend/components/public/UpcomingEventsCarousel.tsx
Normal file
80
frontend/components/public/UpcomingEventsCarousel.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { getMeetupStartUtc } from "@/lib/meetupEventTime";
|
||||
import { MeetupCard } from "@/components/public/MeetupCard";
|
||||
|
||||
export function UpcomingEventsCarousel({ excludeId }: { excludeId: string }) {
|
||||
const [items, setItems] = useState<any[]>([]);
|
||||
const scrollerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api
|
||||
.getMeetups()
|
||||
.then((data: any) => {
|
||||
const list = Array.isArray(data) ? data : [];
|
||||
const now = new Date();
|
||||
const upcoming = list
|
||||
.filter((m: any) => {
|
||||
if (m.id === excludeId) return false;
|
||||
const start = getMeetupStartUtc(m.date, m.time || "00:00");
|
||||
if (Number.isNaN(start.getTime())) return false;
|
||||
return start >= now;
|
||||
})
|
||||
.sort(
|
||||
(a: any, b: any) =>
|
||||
getMeetupStartUtc(a.date, a.time || "00:00").getTime() -
|
||||
getMeetupStartUtc(b.date, b.time || "00:00").getTime()
|
||||
);
|
||||
setItems(upcoming);
|
||||
})
|
||||
.catch(() => setItems([]));
|
||||
}, [excludeId]);
|
||||
|
||||
const scrollByDir = (dir: -1 | 1) => {
|
||||
const el = scrollerRef.current;
|
||||
if (!el) return;
|
||||
const delta = Math.min(el.clientWidth * 0.85, 360);
|
||||
el.scrollBy({ left: dir * delta, behavior: "smooth" });
|
||||
};
|
||||
|
||||
if (items.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="mt-16 pt-12 border-t border-zinc-800/50">
|
||||
<div className="flex items-end justify-between gap-4 mb-6">
|
||||
<h2 className="text-lg font-black tracking-tight">More upcoming events</h2>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => scrollByDir(-1)}
|
||||
className="p-2.5 rounded-xl border border-zinc-800 bg-zinc-900/80 text-on-surface-variant hover:text-primary hover:border-zinc-700 transition-colors"
|
||||
aria-label="Scroll left"
|
||||
>
|
||||
<ChevronLeft size={18} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => scrollByDir(1)}
|
||||
className="p-2.5 rounded-xl border border-zinc-800 bg-zinc-900/80 text-on-surface-variant hover:text-primary hover:border-zinc-700 transition-colors"
|
||||
aria-label="Scroll right"
|
||||
>
|
||||
<ChevronRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref={scrollerRef}
|
||||
className="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory pb-2 -mx-1 px-1 [scrollbar-width:thin]"
|
||||
>
|
||||
{items.map((m) => (
|
||||
<div key={m.id} className="snap-start shrink-0 w-[min(280px,calc(100vw-5rem))] sm:w-[280px]">
|
||||
<MeetupCard meetup={m} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user