diff --git a/apps/site/src/components/Sticker/BaseSticker.module.scss b/apps/site/src/components/Sticker/BaseSticker.module.scss index 775c4965..996b0e97 100644 --- a/apps/site/src/components/Sticker/BaseSticker.module.scss +++ b/apps/site/src/components/Sticker/BaseSticker.module.scss @@ -1,3 +1,5 @@ -.stickerContainer { +.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 index 10f4d7c6..ad77726b 100644 --- a/apps/site/src/components/Sticker/BaseSticker.tsx +++ b/apps/site/src/components/Sticker/BaseSticker.tsx @@ -1,8 +1,9 @@ "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 { imageSrc: string; @@ -14,9 +15,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; + offsetX?: number; + offsetY?: number; } -export default function Sticker({ +const BaseSticker: React.FC = ({ imageSrc, alt, height = 100, @@ -25,7 +28,9 @@ export default function Sticker({ dragConstraints = false, animate = {}, transition = {}, -}: StickerProps) { + offsetX = 0, + offsetY = 0, +}) => { // prevent next from throwing error involving DOM API const pageRef = useRef( typeof document !== "undefined" ? document.documentElement : undefined, @@ -53,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 + offsetX, y: -height / 2 + offsetY }, dragMomentum: false, dragConstraints: dragConstraints ? dragConstraints : pageRef, dragElastic: 0.2, @@ -62,13 +68,15 @@ export default function Sticker({ return ( ); -} +}; + +export default BaseSticker; diff --git a/apps/site/src/components/Sticker/StickerPosition.module.scss b/apps/site/src/components/Sticker/StickerPosition.module.scss new file mode 100644 index 00000000..a9bd3cdf --- /dev/null +++ b/apps/site/src/components/Sticker/StickerPosition.module.scss @@ -0,0 +1,12 @@ +.stickerPosition { + position: relative; + display: flex; + justify-content: center; + width: max-content; +} + +.stickerParent { + position: relative; + width: 0; + height: 0; +} diff --git a/apps/site/src/components/Sticker/StickerPosition.tsx b/apps/site/src/components/Sticker/StickerPosition.tsx new file mode 100644 index 00000000..445796cc --- /dev/null +++ b/apps/site/src/components/Sticker/StickerPosition.tsx @@ -0,0 +1,56 @@ +import type { StickerProps } from "./Stickers/stickerProps"; +import styles from "./StickerPosition.module.scss"; + +interface Sticker { + Node: React.ComponentType; + positionX?: "left" | "right"; + positionY?: "top" | "bottom"; + offsetX?: number; + offsetY?: number; +} + +const StickerParent: React.FC = ({ + Node, + positionY = "top", + offsetX, + offsetY, +}) => ( +
+ +
+); + +interface StickerPositionProps { + children?: React.ReactNode; + stickers: Sticker[]; +} + +const StickerPosition: React.FC = ({ + children, + stickers, +}) => { + return ( +
+ {stickers + .filter(({ positionX }) => !positionX || positionX === "left") + .map((sticker) => ( + // eslint-disable-next-line react/jsx-key + + ))} + {children} + {stickers + .filter(({ positionX }) => positionX === "right") + .map((sticker) => ( + // eslint-disable-next-line react/jsx-key + + ))} +
+ ); +}; + +export default StickerPosition; diff --git a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss b/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss deleted file mode 100644 index d308296a..00000000 --- a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.stickerContainer { - filter: drop-shadow(3px 5px 5px rgba(black, 0.3)); -} diff --git a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx b/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx index 27b24f04..cd098ecb 100644 --- a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx +++ b/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx @@ -1,18 +1,18 @@ +import type React from "react"; +import type { StickerProps } from "../stickerProps"; import HackLogo from "@/assets/icons/hack.png"; import BaseSticker from "../../BaseSticker"; -import styles from "./HackSticker.module.scss"; import { lightShake } from "@/components/animation"; -export default function HackSticker({ style }: { style?: object | undefined }) { - return ( -
- -
- ); -} +const HackSticker: React.FC = (props) => ( + +); + +export default HackSticker; diff --git a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx index 7d9dd148..9257901f 100644 --- a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx +++ b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx @@ -1,21 +1,18 @@ +import type React from "react"; +import type { StickerProps } from "../stickerProps"; import HeartEmoji from "@/assets/images/heart_emoji.png"; import BaseSticker from "../../BaseSticker"; import { fastShake } from "@/components/animation"; -export default function HeartSticker({ - style, -}: { - style?: object | undefined; -}) { - return ( -
- -
- ); -} +const HeartSticker: React.FC = (props) => ( + +); + +export default HeartSticker; diff --git a/apps/site/src/components/Sticker/Stickers/stickerProps.ts b/apps/site/src/components/Sticker/Stickers/stickerProps.ts new file mode 100644 index 00000000..054a6a1a --- /dev/null +++ b/apps/site/src/components/Sticker/Stickers/stickerProps.ts @@ -0,0 +1,4 @@ +export interface StickerProps { + offsetX?: number; + offsetY?: number; +} diff --git a/apps/site/src/views/Home/Home.tsx b/apps/site/src/views/Home/Home.tsx index ea164ae1..c2434c2d 100644 --- a/apps/site/src/views/Home/Home.tsx +++ b/apps/site/src/views/Home/Home.tsx @@ -4,14 +4,11 @@ import Mentor from "./sections/Mentor/Mentor"; import Sponsors from "./sections/Sponsors/Sponsors"; import FAQ from "./sections/FAQ/FAQ"; -import StickerLayout from "./components/StickerLayout/StickerLayout"; - import styles from "./Home.module.scss"; function Home() { return ( <> -
diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss index 4061d64f..94c5a74b 100644 --- a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss +++ b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss @@ -16,10 +16,11 @@ $skew-amount: -30deg; @include bootstrap.font-size(bootstrap.$h4-font-size); - max-width: 70%; transform: skew($skew-amount); // unskew children > * { + width: max-content; + display: block; transform: skew(-$skew-amount); } diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx index 0f581ca9..5c1b5ee0 100644 --- a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx +++ b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx @@ -1,17 +1,31 @@ import Button from "react-bootstrap/Button"; +import StickerPosition from "@/components/Sticker/StickerPosition"; +import { HackSticker, HeartSticker } from "@/components/Sticker/Stickers"; import styles from "./ApplyButton.module.scss"; export default function ApplyButton() { return ( - + + ); } diff --git a/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx b/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx deleted file mode 100644 index 5dba189f..00000000 --- a/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { HeartSticker } from "@/components/Sticker/Stickers"; - -export default function StickerLayout() { - return ( - <> - - - ); -} diff --git a/apps/site/src/views/Home/sections/Landing/Landing.tsx b/apps/site/src/views/Home/sections/Landing/Landing.tsx index b9a33bef..1f9715b3 100644 --- a/apps/site/src/views/Home/sections/Landing/Landing.tsx +++ b/apps/site/src/views/Home/sections/Landing/Landing.tsx @@ -1,6 +1,5 @@ "use client"; - -import ApplyButton from "../../components/ApplyButton/ApplyButton"; +import ApplyButton from "@/views/Home/components/ApplyButton/ApplyButton"; import styles from "./Landing.module.scss";