add support for choosing a pig for events

web/src/components/general/BgPig.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { PIG_NAMES } from "@/lib/common";
 import styles from "./pig.module.scss";
 import { ChillPig } from "./pigs/simple/ChillPig";
 import { DancePig } from "./pigs/simple/DancePig";
@@ -17,21 +18,15 @@ export const BgPig = ({
   type,
   color,
 }: {
-  type:
-    | "logo"
-    | "music"
-    | "drink"
-    | "dance"
-    | "point"
-    | "student"
-    | "listen"
-    | "guard"
-    | "key"
-    | "chill"
-    | "peek";
+  type: string;
   color?: "neufPink" | "white" | "goldenBeige";
 }) => {
   const { ref: observer, inView: IsInView } = useInView({ triggerOnce: false });
+
+  if (!PIG_NAMES.includes(type)) {
+    return <></>;
+  }
+
   return (
     <div className={styles.bgPigWrapper}>
       <div