Files
neuf-www/web/src/components/events/EventHeader.tsx

89 lines
2.8 KiB
TypeScript

import { EventCategory, EventFragment } from "@/lib/event";
import styles from "./eventHeader.module.scss";
import Image from "@/components/general/Image";
import { Pig } from "../general/Pig";
import Link from "next/link";
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 }) => {
const featuredImage: any = event.featuredImage;
return (
<div className={styles.eventHeader}>
<div className={styles.text}>
<span className="suphead breadcrumb">
<Link href="/arrangementer">Arrangement</Link>
</span>
<h1 className={styles.title}>{event.title}</h1>
<div className={styles.details}>
<p>Vise neste dato her?</p>
<div className={styles.prices}>
{/*<h2>Pris</h2>*/}
<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.ticketUrl && (
<a href={event.ticketUrl} className="button cta">
Kjøp billetter
</a>
)}
{event.facebookUrl && (
<a href={event.facebookUrl} className="textLink">
til Facebook-event
</a>
)}
{event.categories.length > 0 && (
<div>
Kategorier: {event.categories.map((x) => x.name).join(", ")}
</div>
)}
</div>
</div>
<div className={styles.image}>
{featuredImage && (
<Image
src={featuredImage.url}
alt={featuredImage.alt}
width={featuredImage.width}
height={featuredImage.height}
sizes="100vw"
/>
)}
</div>
</div>
);
};