Merge pull request #376 from nwplus/hackcamp2023_events_text

fix faq dropdown function
nwplus · Oct 25, 2023 · 61804d6 · 61804d6
2 parents 06ffa40 + cab631f
commit 61804d6
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 22 deletions.
diff --git a/public/hackcamp2023meta.png b/public/hackcamp2023meta.png
diff --git a/public/hc-og.png b/public/hc-og.png
diff --git a/src/components/FaqBox.jsx b/src/components/FaqBox.jsx
@@ -10,10 +10,10 @@ const Container = styled.div`
   overflow:hidden;
 
   ${p => p.expanded
-? `
+    ? `
     border-color: #C4B2F0;
   `
-: `
+    : `
     border-color: #C4B2F0;
   `}
   
@@ -75,15 +75,10 @@ const Arrow = ({ color }) => (
   </svg>
 )
 
-const FaqBox = ({ question, answer }) => {
-  const [isExpanded, setIsExpanded] = useState(false)
-
+const FaqBox = ({ question, answer, isExpanded, onExpand }) => {
   return (
-    <Container
-      expanded={isExpanded}>
-      <Top
-        expanded={isExpanded}
-        onClick={() => setIsExpanded(!isExpanded)}>
+    <Container expanded={isExpanded}>
+      <Top expanded={isExpanded} onClick={onExpand}>
         {question}
         <TopExpand style={isExpanded ? { transform: 'rotate(0)' } : { transform: 'rotate(180deg)' }}>
           <Arrow color={isExpanded ? '#2C2543' : '#2C2543'} />

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -29,7 +29,7 @@ export default function Index ({ title }) {
           participants can learn new skills, connect with fellow tech
           enthusiasts, and build solutions to tackle challenges together."
         />
-        <meta property="og:image" content="/hc-og.png" />
+        <meta property="og:image" content="/hackcamp2023meta.png" />
       </Head>
 
       {/* Components Starts */}

diff --git a/src/sections/Faq.jsx b/src/sections/Faq.jsx
@@ -57,7 +57,7 @@ const bobbing = keyframes`
   50% {
     transform: translateY(-20px);
   }
-`;
+`
 
 const Nugget = styled.div`
   background: url('assets/background/faq/nugget.png') no-repeat;
@@ -211,16 +211,31 @@ display:none;
 }
 `
 
-const FaqCollection = ({ category, faqs }) => (
+const FaqCollection = ({ category, faqs, expandedQuestion, setExpandedQuestion }) => (
   <CollectionContainer>
     <CollectionName>{category}</CollectionName>
 
-    {faqs.map(q => <FaqBox key={q.question} question={q.question} answer={q.answer} />)}
+    {faqs.map(q =>
+      <FaqBox
+        key={q.question}
+        question={q.question}
+        answer={q.answer}
+        isExpanded={expandedQuestion === q.question}
+        onExpand={() => {
+          if (expandedQuestion === q.question) {
+            setExpandedQuestion(null)
+          } else {
+            setExpandedQuestion(q.question)
+          }
+        }}
+      />
+    )}
   </CollectionContainer>
 )
 
 const Faq = () => {
   const [faqData, setFaqData] = useState(null)
+  const [expandedQuestion, setExpandedQuestion] = useState(null)
 
   // (@htdf processData)
   // (@signature (listof FAQ) -> Object)
@@ -249,7 +264,7 @@ const Faq = () => {
       <Nugget></Nugget>
       <BearArm />
       <DeerArm></DeerArm>
-      <BgScroll/>
+      <BgScroll />
       <Wrapper id="faq">
         <StyledTitle>
           FAQ
@@ -258,24 +273,30 @@ const Faq = () => {
         {faqData
           ? (
             <FaqGrid>
-
               <FaqColumn>
                 {faqData.General &&
-                  <FaqCollection category="General" faqs={faqData.General} />
+                  <FaqCollection
+                    category="General"
+                    faqs={faqData.General}
+                    expandedQuestion={expandedQuestion}
+                    setExpandedQuestion={setExpandedQuestion}
+                  />
                 }
               </FaqColumn>
 
               <FaqColumn>
-                {faqData["Teams & Projects"] &&
-                  <FaqCollection category="Projects" faqs={faqData["Teams & Projects"]} />
+                {faqData['Teams & Projects'] &&
+                  <FaqCollection category="Projects" faqs={faqData['Teams & Projects']} expandedQuestion={expandedQuestion}
+                    setExpandedQuestion={setExpandedQuestion} />
                 }
                 {faqData.Logistics &&
-                  <FaqCollection category="Logistics" faqs={faqData.Logistics} />
+                  <FaqCollection category="Logistics" faqs={faqData.Logistics} expandedQuestion={expandedQuestion}
+                    setExpandedQuestion={setExpandedQuestion} />
                 }
               </FaqColumn>
 
             </FaqGrid>
-          )
+            )
           : 'loading...'}
 
       </Wrapper>

diff --git a/src/sections/Learn.jsx b/src/sections/Learn.jsx
@@ -176,7 +176,7 @@ const StyledText = styled.div`
   z-index:4;
 
   ${(p) => p.theme.mediaQueries.mobile} {
-    flex-direction: column-reverse;
+    flex-direction: column;
     align-items: center;
     margin-top: 55vw;
     gap: 80vw;