Merge branch 'main' of github.com:HackAtUCI/zothacks-site-2023 into u…

…pdate/resources-sanity

apps/sanity/sanity.config.ts

@@ -4,7 +4,7 @@ import { visionTool } from "@sanity/vision";
 import { colorInput } from "@sanity/color-input";
 import { media } from "sanity-plugin-media";
 import { schemaTypes } from "./schemas";
-import { BadgeHelp } from "lucide-react";
+import { HeartHandshake, BadgeHelp } from "lucide-react";
 
 export default defineConfig({
 	name: "default",
@@ -19,6 +19,15 @@ export default defineConfig({
 				S.list()
 					.title("Content")
 					.items([
+						S.listItem()
+							.title("Sponsors")
+							.icon(HeartHandshake)
+							.child(
+								S.document()
+									.schemaType("sponsors")
+									.documentId("sponsors")
+									.title("Sponsors")
+							),
 						S.listItem()
 							.title("FAQs")
 							.icon(BadgeHelp)
@@ -27,7 +36,7 @@ export default defineConfig({
 							),
 						S.divider(),
 						...S.documentTypeListItems().filter(
-							(listItem) => !["faqs"].includes(listItem.getId()!)
+							(listItem) => !["faqs", "sponsors"].includes(listItem.getId()!)
 						),
 					]),
 		}),

apps/sanity/schemas/event.ts

@@ -1,4 +1,4 @@
-import { defineType, defineField} from "sanity";
+import { defineType, defineField } from "sanity";
 
 export default defineType({
 	name: "event",
@@ -7,33 +7,41 @@ export default defineType({
 	fields: [
 		defineField({
 			name: "title",
-			title: "title",
-			type: "string"
+			title: "Title",
+			type: "string",
 		}),
 		defineField({
 			name: "startTime",
-			title: "startTime",
-			type: "datetime"
+			title: "Start Time",
+			type: "datetime",
 		}),
 		defineField({
 			name: "endTime",
-			title: "endTime",
-			type: "datetime"
+			title: "End Time",
+			type: "datetime",
 		}),
 		defineField({
 			name: "category",
-			title: "category",
-			type: "string"
+			title: "Category",
+			type: "string",
 		}),
 		defineField({
 			name: "host",
-			title: "host",
-			type: "string"
+			title: "Host",
+			type: "string",
 		}),
 		defineField({
 			name: "description",
-			title: "description",
-			type: "text"
-		})
+			title: "Description",
+			type: "array",
+			of: [
+				{
+					type: "block",
+					styles: [{ title: "Normal", value: "normal" }],
+					lists: [],
+				},
+			],
+			validation: (Rule) => Rule.required(),
+		}),
 	],
 });

apps/sanity/schemas/index.ts

@@ -1,5 +1,6 @@
 import faqs from "./faqs";
 import event from "./event";
 import resource from "./resource";
+import sponsors from "./sponsors";
 
-export const schemaTypes = [faqs, event, resource];
+export const schemaTypes = [faqs, event, resource, sponsors];

apps/sanity/schemas/sponsors.ts

@@ -0,0 +1,61 @@
+import { defineType, defineField, defineArrayMember } from "sanity";
+import { HeartHandshake } from "lucide-react";
+
+export default defineType({
+	name: "sponsors",
+	title: "Sponsors",
+	icon: HeartHandshake,
+	type: "document",
+	fields: [
+		defineField({
+			name: "sponsors",
+			title: "Sponsors",
+			type: "array",
+			of: [
+				defineArrayMember({
+					type: "object",
+					name: "sponsor",
+					fields: [
+						defineField({
+							name: "name",
+							title: "Name",
+							type: "string",
+							validation: (Rule) => Rule.required(),
+						}),
+						defineField({
+							name: "url",
+							title: "URL",
+							type: "url",
+						}),
+						defineField({
+							name: "tier",
+							title: "Tier",
+							type: "string",
+							options: {
+								list: [
+									{
+										title: "Bronze",
+										value: "bronze",
+									},
+									{
+										title: "Silver",
+										value: "silver",
+									},
+								],
+								layout: "radio",
+								direction: "vertical",
+							},
+							validation: (Rule) => Rule.required(),
+						}),
+						defineField({
+							name: "logo",
+							title: "Logo",
+							type: "image",
+							validation: (Rule) => Rule.required(),
+						}),
+					],
+				}),
+			],
+		}),
+	],
+});

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

@@ -1,3 +1,5 @@
-.stickerContainer {
+.sticker {
 	cursor: grab;
+	position: absolute;
+	z-index: 100;
 }

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<StickerProps> = ({
 	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 (
 		<motion.img
-			className={styles.stickerContainer}
-			animate={animateProps}
 			src={imageSrc}
 			alt={alt}
 			height={height}
 			width={width}
+			className={styles.sticker}
+			animate={animateProps}
 			{...drag}
 		/>
 	);
-}
+};
+
+export default BaseSticker;

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;
+}

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<StickerProps>;
+	positionX?: "left" | "right";
+	positionY?: "top" | "bottom";
+	offsetX?: number;
+	offsetY?: number;
+}
+
+const StickerParent: React.FC<Sticker> = ({
+	Node,
+	positionY = "top",
+	offsetX,
+	offsetY,
+}) => (
+	<div
+		className={styles.stickerParent}
+		style={{
+			alignSelf: positionY === "top" ? "flex-start" : "flex-end",
+		}}
+	>
+		<Node offsetX={offsetX} offsetY={offsetY} />
+	</div>
+);
+
+interface StickerPositionProps {
+	children?: React.ReactNode;
+	stickers: Sticker[];
+}
+
+const StickerPosition: React.FC<StickerPositionProps> = ({
+	children,
+	stickers,
+}) => {
+	return (
+		<div className={styles.stickerPosition}>
+			{stickers
+				.filter(({ positionX }) => !positionX || positionX === "left")
+				.map((sticker) => (
+					// eslint-disable-next-line react/jsx-key
+					<StickerParent {...sticker} />
+				))}
+			{children}
+			{stickers
+				.filter(({ positionX }) => positionX === "right")
+				.map((sticker) => (
+					// eslint-disable-next-line react/jsx-key
+					<StickerParent {...sticker} />
+				))}
+		</div>
+	);
+};
+
+export default StickerPosition;

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 (
-		<div className={styles.stickerContainer} style={{ ...style }}>
-			<BaseSticker
-				imageSrc={HackLogo.src}
-				alt="Hack at UCI sticker"
-				height={200}
-				width={200}
-				{...lightShake}
-			/>
-		</div>
-	);
-}
+const HackSticker: React.FC<StickerProps> = (props) => (
+	<BaseSticker
+		imageSrc={HackLogo.src}
+		alt="Hack at UCI sticker"
+		height={200}
+		width={200}
+		{...lightShake}
+		{...props}
+	/>
+);
+
+export default HackSticker;