refactor: centralize sticker positioning logic to base sticker component

HackAtUCI · Oct 22, 2023 · 53569de · 53569de
1 parent f131fb4
commit 53569de
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 50 deletions.
diff --git a/apps/site/src/components/Sticker/BaseSticker.module.scss b/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;
 }
diff --git a/apps/site/src/components/Sticker/BaseSticker.tsx b/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 =
 		typeof document !== "undefined"
@@ -60,6 +63,7 @@ export default function Sticker({
 					}px rgba(0, 0, 0, 0.2))`,
 				},
 				drag: true,
+				initial: { x: -width / 2, y: -height / 2 },
 				dragMomentum: false,
 				dragConstraints: dragConstraints ? dragConstraints : pageRef,
 				dragElastic: 0.2,
@@ -68,15 +72,33 @@ export default function Sticker({
 		: {};
 
 	return (
-		<motion.img
-			style={{ ...style }}
-			src={imageSrc}
-			alt={alt}
-			height={height}
-			width={width}
-			className={styles.stickerContainer}
-			animate={animateProps}
-			{...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;
diff --git a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx b/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;
diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx
@@ -5,12 +5,7 @@ import styles from "./ApplyButton.module.scss";
 
 export default function ApplyButton() {
 	return (
-		<div
-			style={{
-				display: "flex",
-				alignItems: "flex-end",
-			}}
-		>
+		<HeartSticker>
 			<Button
 				className={styles.applyButton}
 				href="/apply"
@@ -19,21 +14,6 @@ export default function ApplyButton() {
 			>
 				<div>Apply</div>
 			</Button>
-			<div
-				style={{
-					position: "relative",
-					width: 0,
-					height: 0,
-					transform: "translate(-75px, -75px);",
-				}}
-			>
-				<HeartSticker
-					style={{
-						position: "absolute",
-						zIndex: 100,
-					}}
-				/>
-			</div>
-		</div>
+		</HeartSticker>
 	);
 }