Merge branch 'main' of github.com:HackAtUCI/irvinehacks-site-2024 int…

…o feature/landing-page-fireflies

apps/site/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -20,6 +19,7 @@
     "@react-three/fiber": "^8.15.10",
     "@types/three": "^0.158.1",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.292.0",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
@@ -35,6 +35,7 @@
     "eslint-config-next": "13.5.6",
     "postcss": "^8",
     "postcss-nesting": "^12.0.1",
+    "sass": "^1.69.5",
     "tailwindcss": "^3",
     "typescript": "^5"
   }

apps/site/src/app/(home)/sections/Landing/Landing.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Button from "@/components/Button/Button";
+import Button from "@/lib/components/Button/Button";
 import styles from "./Landing.module.css";
 
 import { View } from "@/components/canvas/View";

apps/site/src/lib/components/Accordion/Accordion.module.scss

@@ -0,0 +1,80 @@
+.root {
+	color: black;
+}
+
+.item {
+	border-bottom: 2px #36352f solid;
+}
+
+.trigger {
+	width: 100%;
+	padding: 20px 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #fff;
+
+	font-size: 24px;
+	font-weight: 700;
+	line-height: 150%; /* 36px */
+
+	.icons {
+		$icon-size: 24px;
+
+		position: relative;
+		width: $icon-size;
+		height: $icon-size;
+
+		> * {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: $icon-size;
+			height: $icon-size;
+			opacity: 0;
+		}
+	}
+
+	&[data-state="closed"] .plusIcon {
+		opacity: 1;
+	}
+	&[data-state="open"] .minusIcon {
+		opacity: 1;
+	}
+}
+
+.content {
+	font-size: 20px;
+	font-weight: 500;
+	line-height: 125%;
+	overflow: hidden;
+
+	.contentPadding {
+		padding-bottom: 24px;
+	}
+
+	@keyframes slideDown {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-accordion-content-height);
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			height: var(--radix-accordion-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
+
+	&[data-state="open"] {
+		animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+	}
+	&[data-state="closed"] {
+		animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+	}
+}

apps/site/src/lib/components/Accordion/Accordion.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { Plus, Minus } from "lucide-react";
+import clsx from "clsx";
+
+import styles from "./Accordion.module.scss";
+
+export const Root = React.forwardRef<
+	React.ElementRef<typeof RadixAccordion.Root>,
+	React.ComponentPropsWithoutRef<typeof RadixAccordion.Root>
+>(({ children, className, ...props }, forwardedRef) => (
+	<RadixAccordion.Root
+		className={clsx(styles.root, className)}
+		{...props}
+		ref={forwardedRef}
+	>
+		{children}
+	</RadixAccordion.Root>
+));
+Root.displayName = RadixAccordion.Root.displayName;
+
+export const Item = React.forwardRef<
+	React.ElementRef<typeof RadixAccordion.Item>,
+	React.ComponentPropsWithoutRef<typeof RadixAccordion.Item>
+>(({ children, className, ...props }, forwardedRef) => (
+	<RadixAccordion.Item
+		className={clsx(styles.item, className)}
+		{...props}
+		ref={forwardedRef}
+	>
+		{children}
+	</RadixAccordion.Item>
+));
+Item.displayName = RadixAccordion.Item.displayName;
+
+export const Trigger = React.forwardRef<
+	React.ElementRef<typeof RadixAccordion.Trigger>,
+	React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>
+>(({ children, className, ...props }, forwardedRef) => (
+	<RadixAccordion.Header>
+		<RadixAccordion.Trigger
+			className={clsx(styles.trigger, className)}
+			{...props}
+			ref={forwardedRef}
+		>
+			{children}
+			<div className={styles.icons}>
+				<Plus size={24} className={styles.plusIcon} aria-hidden />
+				<Minus size={24} className={styles.minusIcon} aria-hidden />
+			</div>
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+Trigger.displayName = "AccordionTrigger";
+
+export const Content = React.forwardRef<
+	React.ElementRef<typeof RadixAccordion.Content>,
+	React.ComponentPropsWithoutRef<typeof RadixAccordion.Content>
+>(({ children, className, ...props }, forwardedRef) => (
+	<RadixAccordion.Content
+		className={clsx(styles.content, className)}
+		{...props}
+		ref={forwardedRef}
+	>
+		<div className={styles.contentPadding}>{children}</div>
+	</RadixAccordion.Content>
+));
+Content.displayName = RadixAccordion.Content.displayName;

apps/site/src/lib/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { Root, Item, Trigger, Content } from "./Accordion";