99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import { EventFragment } from "@/lib/event";
|
|
import styles from "./eventHeader.module.scss";
|
|
import { Image } from "@/components/general/Image";
|
|
import Link from "next/link";
|
|
import { OrganizerList } from "./OrganizerList";
|
|
import Icon from "../general/Icon";
|
|
import { Breadcrumb } from "../general/Breadcrumb";
|
|
|
|
function formatPrice(price: number): string {
|
|
if (price === null) {
|
|
// should not happen
|
|
return "?";
|
|
}
|
|
if (price === 0) {
|
|
return "Gratis";
|
|
}
|
|
return `${price} kr`;
|
|
}
|
|
|
|
export const EventHeader = ({ event }: { event: EventFragment }) => {
|
|
// TODO: where should we show image attribution for the featured image?
|
|
|
|
const featuredImage: any = event.featuredImage;
|
|
|
|
return (
|
|
<div className={styles.eventHeader}>
|
|
<div className={styles.text}>
|
|
<Breadcrumb link="/arrangementer" text="Arrangement" />
|
|
<h1 className={styles.title}>{event.title}</h1>
|
|
<div className={styles.eventDetails}>
|
|
<div className={styles.prices}>
|
|
<span className={styles.label}>Pris:</span>
|
|
<ul className={styles.priceList}>
|
|
{event.free && (
|
|
<li className={styles.priceItem}>
|
|
<span>Gratis</span>
|
|
</li>
|
|
)}
|
|
{typeof event.priceRegular === "number" && (
|
|
<li className={styles.priceItem}>
|
|
<span className={styles.priceLabel}>Ordinær:</span>{" "}
|
|
{formatPrice(event.priceRegular)}
|
|
</li>
|
|
)}
|
|
{typeof event.priceStudent === "number" && (
|
|
<li className={styles.priceItem}>
|
|
<span className={styles.priceLabel}>Student:</span>{" "}
|
|
{formatPrice(event.priceStudent)}
|
|
</li>
|
|
)}
|
|
{typeof event.priceMember === "number" && (
|
|
<li className={styles.priceItem}>
|
|
<span className={styles.priceLabel}>Medlem:</span>{" "}
|
|
{formatPrice(event.priceMember)}
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
{event.categories.length > 0 && (
|
|
<div>
|
|
<span className={styles.label}>Kategorier:</span>{" "}
|
|
{event.categories.map((x) => x.name).join(", ")}
|
|
</div>
|
|
)}
|
|
{event.organizers && (
|
|
<div>
|
|
<span className={styles.label}>Arrangeres av:</span>{" "}
|
|
<OrganizerList event={event} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
{event.ticketUrl && (
|
|
<a href={event.ticketUrl} className="button cta">
|
|
<span>Kjøp billetter</span>
|
|
<Icon type="tickets" />
|
|
</a>
|
|
)}
|
|
{event.facebookUrl && (
|
|
<a href={event.facebookUrl} className="button tertiary">
|
|
<span>Gå til Facebook-event</span>
|
|
<Icon type="externalLink" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
<div className={styles.image}>
|
|
{featuredImage && (
|
|
<Image
|
|
src={featuredImage.url}
|
|
alt={featuredImage.alt}
|
|
width={featuredImage.width}
|
|
height={featuredImage.height}
|
|
sizes="100vw"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|