misc design progress and testing

web/src/components/events/EventHeader.tsx

@@ -2,22 +2,62 @@ 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";
 
 export const EventHeader = ({ event }: { event: EventFragment }) => {
   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}>
-          <div>Facebook: {event.facebookUrl}</div>
-          <div>Billettlenke: {event.ticketUrl}</div>
-          <div>Ordinær pris: {event.priceRegular}</div>
-          <div>Studentpris: {event.priceStudent}</div>
-          <div>Medlemspris: {event.priceMember}</div>
-          <div>
-            Kategorier:{" "}
-            {event.categories && event.categories.map((x) => x.name).join(", ")}
+          {event.facebookUrl && (
+            <a href={event.facebookUrl} className="button">
+              Gå til Facebook-event
+            </a>
+          )}
+          {event.ticketUrl && (
+            <a href={event.ticketUrl} className="button cta">
+              Kjøp billetter
+            </a>
+          )}
+          <div className={styles.prices}>
+            <h2>Pris</h2>
+            <ul className={styles.priceList}>
+              {!event.priceRegular &&
+                !event.priceStudent &&
+                !event.priceMember && (
+                  <li className={styles.priceItem}>
+                    <span>Gratis</span>
+                  </li>
+                )}
+              {event.priceRegular && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Ordinær:</span>{" "}
+                  {event.priceRegular} kr
+                </li>
+              )}
+              {event.priceStudent && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Student:</span>{" "}
+                  {event.priceStudent} kr
+                </li>
+              )}
+              {event.priceMember && (
+                <li className={styles.priceItem}>
+                  <span className={styles.priceLabel}>Medlem:</span>{" "}
+                  {event.priceMember} kr
+                </li>
+              )}
+            </ul>
           </div>
+          {event.categories.length > 0 && (
+            <div>
+              Kategorier: {event.categories.map((x) => x.name).join(", ")}
+            </div>
+          )}
         </div>
       </div>
       <div className={styles.image}>