54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { EventFragment } from "@/gql/graphql";
|
|
import { isTodayOrFuture, formatDate } from "@/lib/date";
|
|
import { parse } from "date-fns";
|
|
import {
|
|
getSingularEvents,
|
|
organizeEventsByDate,
|
|
sortSingularEvents,
|
|
} from "@/lib/event";
|
|
import Link from "next/link";
|
|
import { EventItem } from "./EventItem";
|
|
import styles from "./upcomingEvents.module.scss";
|
|
import { SectionHeader } from "../general/SectionHeader";
|
|
|
|
export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
|
|
const upcomingSingularEvents = sortSingularEvents(
|
|
getSingularEvents(events).filter((event) =>
|
|
isTodayOrFuture(event.occurrence.start)
|
|
)
|
|
);
|
|
const sliced = upcomingSingularEvents.slice(0, 10);
|
|
const eventsByDate = organizeEventsByDate(sliced);
|
|
|
|
return (
|
|
<section className={styles.upcomingWrapper}>
|
|
<SectionHeader heading="Dette skjer på Neuf" link="/arrangementer?mode=calendar" linkText="Vis kalender" />
|
|
<div className={styles.eventList}>
|
|
{Object.keys(eventsByDate).map((day) => {
|
|
const eventsThisDay = eventsByDate[day];
|
|
return (
|
|
<div key={day}>
|
|
{/*<h3>
|
|
{formatDate(
|
|
parse(day, "yyyy-MM-dd", new Date()),
|
|
"eeee dd.MM."
|
|
)}
|
|
</h3>*/}
|
|
<ul>
|
|
{eventsThisDay.map((event) => (
|
|
<EventItem
|
|
key={`${event.id}-${event.occurrence.id}`}
|
|
event={event}
|
|
mode="singular-time-only"
|
|
size="medium"
|
|
/>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|