add event header component and the first pig

web/src/app/arrangementer/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { EventFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import Image from "@/components/general/Image";
+import { EventHeader } from "@/components/events/EventHeader";
 
 export async function generateStaticParams() {
   const allEventSlugsQuery = graphql(`
@@ -39,25 +40,9 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
   return (
     <main className="site-main" id="main">
-      <section className="page-header">
-        <h1>{event.title}</h1>
-        {event.featuredImage && (
-          <Image
-            src={event.featuredImage.url}
-            alt=""
-            width={event.featuredImage.width}
-            height={event.featuredImage.height}
-            sizes="100vw"
-          />
-        )}
-      </section>
+      <EventHeader event={event} />
       <section className="page-content">
         <Blocks blocks={event.body} />
-        <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>
       </section>
     </main>
   );

web/src/components/events/EventHeader.tsx

@@ -0,0 +1,35 @@
+import { EventFragment } from "@/gql/graphql";
+import styles from "./eventHeader.module.scss";
+import Image from "@/components/general/Image";
+import { Pig } from "../general/Pig";
+
+export const EventHeader = ({ event }: { event: EventFragment }) => {
+  return (
+    <div className={styles.eventHeader}>
+      <div className={styles.text}>
+        <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>
+      </div>
+      <div className={styles.image}>
+        {event.featuredImage && (
+          <Image
+            src={event.featuredImage.url}
+            alt=""
+            width={event.featuredImage.width}
+            height={event.featuredImage.height}
+            sizes="100vw"
+          />
+        )}
+        <div className={styles.pig}>
+          <Pig type="logo" />
+        </div>
+      </div>
+    </div>
+  );
+};

web/src/components/events/eventHeader.module.scss

@@ -0,0 +1,32 @@
+.eventHeader {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: var(--spacing-gap-column);
+  align-items: flex-end;
+  padding: 0 0 var(--spacing-sitepadding) 0;
+}
+
+.title {
+  font-size: var(--font-size-h1);
+}
+
+.image {
+  grid-column: span 2;
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.details {
+  font-family: var(--font-serif);
+}
+
+.pig {
+  position: absolute;
+  bottom: -30%;
+  right: -2.5rem;
+  color: var(--color-white);
+}

web/src/components/general/Pig.tsx

@@ -0,0 +1,19 @@
+import styles from "./pig.module.scss";
+import { LogoPig } from "./pigs/LogoPig";
+
+export const Pig = ({
+  type,
+}: {
+  type:
+    | "logo"
+    | "music"
+    | "point"
+    | "student"
+    | "dance"
+    | "listen"
+    | "drink"
+    | "guard"
+    | "peek";
+}) => {
+  return <div className={styles.pig}>{type === "logo" && <LogoPig />}</div>;
+};

web/src/components/general/pig.module.scss

@@ -0,0 +1,8 @@
+.pig {
+  color: var(--color-pig);
+  width: 16rem;
+
+  svg {
+    width: 100%;
+  }
+}