mooore pigs

web/src/components/events/EventHeader.tsx

@@ -27,7 +27,7 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
           />
         )}
         <div className={styles.pig}>
-          <Pig type="logo" />
+          <Pig type="student" />
         </div>
       </div>
     </div>

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

@@ -26,7 +26,12 @@
 
 .pig {
   position: absolute;
-  bottom: -30%;
+  bottom: 0;
   right: -2.5rem;
+  transform: translateY(50%);
   color: var(--color-white);
+
+  >div {
+    width: 30vw;
+  }
 }

web/src/components/general/Pig.tsx

@@ -1,5 +1,15 @@
 import styles from "./pig.module.scss";
+import { ChillPig } from "./pigs/ChillPig";
+import { DancePig } from "./pigs/DancePig";
+import { DrinkPig } from "./pigs/DrinkPig";
+import { GuardPig } from "./pigs/GuardPig";
+import { KeyPig } from "./pigs/KeyPig";
+import { ListenPig } from "./pigs/ListenPig";
 import { LogoPig } from "./pigs/LogoPig";
+import { MusicPig } from "./pigs/MusicPig";
+import { PeekPig } from "./pigs/PeekPig";
+import { PointPig } from "./pigs/PointPig";
+import { StudentPig } from "./pigs/StudentPig";
 
 export const Pig = ({
   type,
@@ -7,13 +17,29 @@ export const Pig = ({
   type:
     | "logo"
     | "music"
+    | "drink"
+    | "dance"
     | "point"
     | "student"
-    | "dance"
     | "listen"
-    | "drink"
     | "guard"
+    | "key"
+    | "chill"
     | "peek";
 }) => {
-  return <div className={styles.pig}>{type === "logo" && <LogoPig />}</div>;
+  return (
+    <div className={styles.pig}>
+      {type === "logo" && <LogoPig />}
+      {type === "music" && <MusicPig />}
+      {type === "drink" && <DrinkPig />}
+      {type === "dance" && <DancePig />}
+      {type === "point" && <PointPig />}
+      {type === "student" && <StudentPig />}
+      {type === "listen" && <ListenPig />}
+      {type === "guard" && <GuardPig />}
+      {type === "key" && <KeyPig />}
+      {type === "chill" && <ChillPig />}
+      {type === "peek" && <PeekPig />}
+    </div>
+  );
 };