refactor: centralize sticker positioning logic to base sticker component

apps/site/src/components/Sticker/BaseSticker.module.scss

@@ -1,3 +1,16 @@
-.stickerContainer {
+.stickerPositionContainer {
+	position: relative;
+	display: flex;
+}
+
+.stickerParent {
+	position: "relative";
+	width: 0;
+	height: 0;
+}
+
+.sticker {
 	cursor: grab;
+	position: absolute;
+	z-index: 100;
 }

apps/site/src/components/Sticker/BaseSticker.tsx

@@ -1,10 +1,13 @@
 "use client";
 
+import { MutableRefObject, useRef } from "react";
 import { motion } from "framer-motion";
+
 import styles from "./BaseSticker.module.scss";
-import { MutableRefObject, useRef } from "react";
 
 interface StickerProps {
+	children?: React.ReactNode;
+	position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 	imageSrc: string;
 	alt: string;
 	height?: number;
@@ -14,10 +17,11 @@ interface StickerProps {
 	// dragConstraints prop can be an object containing coordinates, a Falsy boolean, or a parent ref (https://www.framer.com/motion/gestures/#:~:text=%23-,dragConstraints%3A,-false%20%7C%20Partial%3CBoundingBox2D)
 	animate?: object | undefined;
 	transition?: object | undefined;
-	style?: object | undefined;
 }
 
-export default function Sticker({
+const BaseSticker: React.FC<StickerProps> = ({
+	children,
+	position = "bottom-right",
 	imageSrc,
 	alt,
 	height = 100,
@@ -26,8 +30,7 @@ export default function Sticker({
 	dragConstraints = false,
 	animate = {},
 	transition = {},
-	style = {},
-}: StickerProps) {
+}) => {
 	// prevent next from throwing error involving DOM API
 	const pageRef = useRef(
 		typeof document !== "undefined" ? document.documentElement : undefined,
@@ -55,6 +58,7 @@ export default function Sticker({
 					filter: `drop-shadow(10px 14px 10px rgba(0, 0, 0, 0.2))`,
 				},
 				drag: true,
+				initial: { x: -width / 2, y: -height / 2 },
 				dragMomentum: false,
 				dragConstraints: dragConstraints ? dragConstraints : pageRef,
 				dragElastic: 0.2,
@@ -63,14 +67,33 @@ export default function Sticker({
 		: {};
 
 	return (
-		<motion.img
-			className={styles.stickerContainer}
-			animate={animateProps}
-			src={imageSrc}
-			alt={alt}
-			height={height}
-			width={width}
-			{...drag}
-		/>
+		<div
+			className={styles.stickerPositionContainer}
+			style={{
+				flexDirection:
+					position === "top-left" || position === "bottom-left"
+						? "row-reverse"
+						: "row",
+				alignItems:
+					position === "bottom-left" || position === "bottom-right"
+						? "flex-end"
+						: "flex-start",
+			}}
+		>
+			{children}
+			<div className={styles.stickerParent}>
+				<motion.img
+					src={imageSrc}
+					alt={alt}
+					height={height}
+					width={width}
+					className={styles.sticker}
+					animate={animateProps}
+					{...drag}
+				/>
+			</div>
+		</div>
 	);
-}
+};
+
+export default BaseSticker;

apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx

@@ -1,16 +1,26 @@
 import HeartEmoji from "@/assets/images/heart_emoji.png";
 import BaseSticker from "../../BaseSticker";
 import { fastShake } from "@/components/animation";
+import React from "react";
 
-export default function HeartSticker(style: any) {
-	return (
-		<BaseSticker
-			style={{ ...style }}
-			imageSrc={HeartEmoji.src}
-			alt="heart emoji sticker"
-			height={150}
-			width={150}
-			{...fastShake}
-		/>
-	);
+interface HeartStickerProps {
+	children: React.ReactNode;
+	position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }
+
+const HeartSticker = React.forwardRef<
+	React.ElementRef<typeof BaseSticker>,
+	HeartStickerProps
+>(({ ...props }, ref) => (
+	<BaseSticker
+		imageSrc={HeartEmoji.src}
+		alt="heart emoji sticker"
+		height={150}
+		width={150}
+		{...fastShake}
+		{...props}
+	/>
+));
+HeartSticker.displayName = "HeartSticker";
+
+export default HeartSticker;

apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx

@@ -5,14 +5,15 @@ import styles from "./ApplyButton.module.scss";
 
 export default function ApplyButton() {
 	return (
-		<Button
-			className={styles.applyButton}
-			href="/apply"
-			variant=""
-			target="_blank"
-			disabled
-		>
-			<div>Applications have closed!</div>
-		</Button>
+		<HeartSticker>
+			<Button
+				className={styles.applyButton}
+				href="/apply"
+				variant=""
+				target="_blank"
+			>
+				<div>Apply</div>
+			</Button>
+		</HeartSticker>
 	);
 }