72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import styles from "./eventItem.module.scss";
|
|
import Link from "next/link";
|
|
import Image from "../general/Image";
|
|
import {
|
|
SingularEvent,
|
|
EventFragment,
|
|
getClosestOccurrence,
|
|
} from "@/lib/event";
|
|
import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";
|
|
|
|
export const EventItem = ({
|
|
event,
|
|
mode,
|
|
size,
|
|
}: {
|
|
event: SingularEvent | EventFragment;
|
|
mode: "list" | "calendar";
|
|
size?: "small" | "medium" | "large";
|
|
}) => {
|
|
const nextOccurrence = getClosestOccurrence(event);
|
|
const numOccurrences = event?.occurrences?.length ?? 0;
|
|
const featuredImage: any = event.featuredImage;
|
|
|
|
return (
|
|
<li
|
|
className={`${styles.eventItem} ${
|
|
size ? styles[size] : styles.large
|
|
} linkItem`}
|
|
>
|
|
<div className={styles.image}>
|
|
{featuredImage && (
|
|
<Image
|
|
src={featuredImage.url}
|
|
alt={featuredImage.alt}
|
|
width={0}
|
|
height={0}
|
|
sizes="20vw"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className={styles.text}>
|
|
<h1 className={styles.title}>{event.title}</h1>
|
|
{mode === "list" && nextOccurrence && (
|
|
<p className={styles.details}>
|
|
{numOccurrences === 1 &&
|
|
nextOccurrence?.start &&
|
|
formatDate(nextOccurrence.start, commonDateFormat)}
|
|
{numOccurrences > 1 && nextOccurrence?.start && (
|
|
<span>
|
|
<em>Neste:</em>{" "}
|
|
{formatDate(nextOccurrence.start, commonDateFormat)}
|
|
</span>
|
|
)}
|
|
</p>
|
|
)}
|
|
{mode === "calendar" &&
|
|
"occurrence" in event &&
|
|
event.occurrence?.start && (
|
|
<p className={styles.details}>
|
|
{formatDate(event.occurrence?.start, "'kl.' HH:mm")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
|
|
Mer om arrangementet {event.title}
|
|
</Link>
|
|
</li>
|
|
);
|
|
};
|