53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"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";
|
|
import { DrinkPig } from "./pigs/simple/DrinkPig";
|
|
import { GuardPig } from "./pigs/simple/GuardPig";
|
|
import { KeyPig } from "./pigs/simple/KeyPig";
|
|
import { ListenPig } from "./pigs/simple/ListenPig";
|
|
import { LogoPig } from "./pigs/simple/LogoPig";
|
|
import { MusicPig } from "./pigs/simple/MusicPig";
|
|
import { PeekPig } from "./pigs/simple/PeekPig";
|
|
import { PointPig } from "./pigs/simple/PointPig";
|
|
import { StudentPig } from "./pigs/simple/StudentPig";
|
|
import { useInView } from "react-intersection-observer";
|
|
|
|
export const BgPig = ({
|
|
type,
|
|
color,
|
|
}: {
|
|
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
|
|
className={`${styles.pig} ${styles.bgPig}`}
|
|
style={{ "--color-pig": color } as React.CSSProperties}
|
|
data-inview={IsInView}
|
|
>
|
|
{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>
|
|
<div className={styles.observer} ref={observer}></div>
|
|
</div>
|
|
);
|
|
};
|