From 3674cd75d7049bfe3a144aa69fe5d20cab2b6eb4 Mon Sep 17 00:00:00 2001 From: skewalia Date: Tue, 16 Sep 2025 17:47:40 -0400 Subject: [PATCH 1/3] created accordian component and moved to faq section --- apps/main/src/app/(landing)/Sections/FAQ.tsx | 27 ++++++++- .../main/src/app/lib/Components/Accordian.tsx | 60 +++++++++++++++++++ 2 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 apps/main/src/app/lib/Components/Accordian.tsx diff --git a/apps/main/src/app/(landing)/Sections/FAQ.tsx b/apps/main/src/app/(landing)/Sections/FAQ.tsx index ab500c6..a9e4fd3 100644 --- a/apps/main/src/app/(landing)/Sections/FAQ.tsx +++ b/apps/main/src/app/(landing)/Sections/FAQ.tsx @@ -1,7 +1,28 @@ import React from "react"; +import Accordion from "./../../lib/Components/Accordian"; // import clsx from "clsx"; -// import useDevice from "@repo/util/hooks/useDevice"; -export default function FAQ(): React.ReactNode { - return <>; +const faqData = [ + { + title: "When is the hackathon?", + content: "HackBeanpot is a three day long event, beginning on Friday, February 11th and ending on Sunday, February 13th." + }, + { + title: "When is the hackathon?", + content: "HackBeanpot is a three day long event, beginning on Friday, February 11th and ending on Sunday, February 13th." + }, + { + title: "When is the hackathon?", + content: "HackBeanpot is a three day long event, beginning on Friday, February 11th and ending on Sunday, February 13th." + } +]; + +export default function FAQ() { + return ( +
+ FAQ + +
+ ); } diff --git a/apps/main/src/app/lib/Components/Accordian.tsx b/apps/main/src/app/lib/Components/Accordian.tsx new file mode 100644 index 0000000..914077c --- /dev/null +++ b/apps/main/src/app/lib/Components/Accordian.tsx @@ -0,0 +1,60 @@ +"use client"; +import React, { useState } from 'react'; + +interface AccordionProps { + title: string; + content: string; +} + +const Accordion = ({ items }: { items: AccordionProps[] }) => { + const [hoveredIndex, setHoveredIndex] = useState(null); + const [open, setOpen] = useState(null); + + return ( +
+ {items.map((item, index) => ( +
+ + {open === index && ( +
+ {item.content} +
+ )} +
+ ))} +
+ ); + }; + +export default Accordion; \ No newline at end of file From 642537ed40cb9df771596b47a25b14389cd1a724 Mon Sep 17 00:00:00 2001 From: skewalia Date: Tue, 16 Sep 2025 18:31:41 -0400 Subject: [PATCH 2/3] added blue line and adjusted padding --- apps/main/src/app/(landing)/Sections/FAQ.tsx | 5 +++-- apps/main/src/app/lib/Components/Accordian.tsx | 3 +-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/main/src/app/(landing)/Sections/FAQ.tsx b/apps/main/src/app/(landing)/Sections/FAQ.tsx index a9e4fd3..133eae0 100644 --- a/apps/main/src/app/(landing)/Sections/FAQ.tsx +++ b/apps/main/src/app/(landing)/Sections/FAQ.tsx @@ -1,5 +1,6 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import Accordion from "./../../lib/Components/Accordian"; +import useDevice from "@util/hooks/useDevice"; // import clsx from "clsx"; const faqData = [ @@ -20,7 +21,7 @@ const faqData = [ export default function FAQ() { return (
+ color: 'white', fontSize: '20px', backgroundColor: '#535353', padding: '48px 24px'}}> FAQ
diff --git a/apps/main/src/app/lib/Components/Accordian.tsx b/apps/main/src/app/lib/Components/Accordian.tsx index 914077c..f7c9108 100644 --- a/apps/main/src/app/lib/Components/Accordian.tsx +++ b/apps/main/src/app/lib/Components/Accordian.tsx @@ -18,7 +18,6 @@ const Accordion = ({ items }: { items: AccordionProps[] }) => { style={{ width: '746px', backgroundColor: '#535353', - marginBottom: '45px', }} > {open === index && ( -
+
{item.content}
)} From dfb1461b7ac0c8b94fd9cd892c99b5e089949cf3 Mon Sep 17 00:00:00 2001 From: skewalia Date: Fri, 19 Sep 2025 11:19:18 -0400 Subject: [PATCH 3/3] added screen responsiveness and fixed component --- .../main/src/app/lib/Components/Accordian.tsx | 127 +++++++++++------- 1 file changed, 82 insertions(+), 45 deletions(-) diff --git a/apps/main/src/app/lib/Components/Accordian.tsx b/apps/main/src/app/lib/Components/Accordian.tsx index f7c9108..4852625 100644 --- a/apps/main/src/app/lib/Components/Accordian.tsx +++ b/apps/main/src/app/lib/Components/Accordian.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useState } from 'react'; +import React, { useState, useEffect } from "react"; interface AccordionProps { title: string; @@ -7,53 +7,90 @@ interface AccordionProps { } const Accordion = ({ items }: { items: AccordionProps[] }) => { - const [hoveredIndex, setHoveredIndex] = useState(null); - const [open, setOpen] = useState(null); + const [hoveredIndex, setHoveredIndex] = useState(null); + const [open, setOpen] = useState(null); + const [isMobile, setIsMobile] = useState(false); - return ( -
- {items.map((item, index) => ( + useEffect(() => { + const handleResize = () => { + setIsMobile(window.innerWidth <= 639); + }; + + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + const wrapperStyle = { + width: isMobile ? "100%" : "746px", + margin: isMobile ? "0 8px" : "0 auto", + backgroundColor: "#535353", + }; + + const buttonStyle = { + width: "100%", + padding: isMobile ? "12px 16px" : "16px", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + borderBottom: "1px solid #004687", + }; + + const contentStyle = { + padding: isMobile ? "16px 16px 16px" : "20px 20px 20px", + color: "#D1D5DB", + fontSize: isMobile ? "14px" : "16px", + lineHeight: isMobile ? "1.4" : "1.5", + borderBottom: "1px solid #004687", + }; + + return ( +
+ {items.map((item, index) => ( +
+ + {open === index && (
- - {open === index && ( -
- {item.content} -
- )} + {item.content}
- ))} + )}
- ); - }; - + ))} +
+ ); +}; + export default Accordion; \ No newline at end of file