From bea597132ba5ed77043c4101d0c3444055fd172f Mon Sep 17 00:00:00 2001
From: Jordan <79342877+Jordan231111@users.noreply.github.com>
Date: Sun, 21 Apr 2024 21:06:22 -0400
Subject: [PATCH 1/6] Fixed faq not collpasing
---
components/faq/faq.tsx | 53 +++++++++++++++---------------------------
package-lock.json | 2 +-
2 files changed, 20 insertions(+), 35 deletions(-)
diff --git a/components/faq/faq.tsx b/components/faq/faq.tsx
index 2980231..78dff20 100644
--- a/components/faq/faq.tsx
+++ b/components/faq/faq.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import "../../app/globals.css"; // Global styles location for tailwind css
+import React, { useState } from "react";
+import "../../app/globals.css";
import RegistrationButton from "../nav-bar/registration-button";
type FAQ = {
@@ -33,7 +33,7 @@ const faqs: FAQ[] = [
content: (
Click here to register:
-
+ {/* This is a custom button component will update later */}
),
},
@@ -50,7 +50,7 @@ const faqs: FAQ[] = [
{
title: "Who else will be there?",
content:
- "Not only can you meet other RPI students and people from other colleges, but we’ve got wonderful sponsors who make this event possible! You’ll have the opportunity to talk to representatives from a variety of tech companies at career-fair style tables.",
+ "Not only can you meet other RPI students and people from other colleges, but we've got wonderful sponsors who make this event possible! You'll have the opportunity to talk to representatives from a variety of tech companies at career-fair style tables.",
},
{
title: "Does HackRPI provide travel reimbursement?",
@@ -61,41 +61,21 @@ const faqs: FAQ[] = [
const FAQPage = () => {
const [highlightFAQ, setHighlightFAQ] = useState(false);
+ const [expandedIndex, setExpandedIndex] = useState(null);
- useEffect(() => {
- // Highlight the FAQ section in the navbar when the user scrolls to it
- let faqStart = (document.getElementById("faq")?.offsetTop || window.innerHeight) - 140;
- let faqEnd = faqStart + (document.getElementById("faq")?.offsetHeight || window.innerHeight);
-
- // Update whether the faq should be highlighted when the user scrolls
- const handleScroll = () => {
- setHighlightFAQ(window.scrollY > faqStart && window.scrollY < faqEnd);
- faqStart = (document.getElementById("faq")?.offsetTop || window.innerHeight) - 140;
- faqEnd = faqStart + (document.getElementById("faq")?.offsetHeight || window.innerHeight);
- };
-
- // Update the faqStart and faqEnd when the user resizes the window
- const handleResize = () => {
- faqStart = (document.getElementById("faq")?.offsetTop || window.innerHeight) - 140;
- faqEnd = faqStart + (document.getElementById("faq")?.offsetHeight || window.innerHeight);
- };
- window.addEventListener("resize", handleResize);
- window.addEventListener("scroll", handleScroll);
- return () => {
- window.removeEventListener("scroll", handleScroll);
- };
- }, []);
+ const handleToggle = (index: number) => {
+ setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
+ };
return (
-