Skip to content

Commit

Permalink
Merge pull request #266 from LaurierHawkHacks/fix/Update-FAQ-section
Browse files Browse the repository at this point in the history 
Enhancement/265/Redo-FAQ-section-with-new-styling
  • Loading branch information
@aidantrabs
aidantrabs authored Apr 23, 2024
2 parents 5f212a1 + 897ab3a commit cecd948
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 54 deletions.
159 changes: 109 additions & 50 deletions src/components/Accordion.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { IoIosArrowDown } from 'react-icons/io';
import { Button } from '@components';
import { LuPlus, LuMinus } from 'react-icons/lu';

interface Item {
question: string;
Expand Down Expand Up @@ -31,18 +32,60 @@ const Accordion: React.FC<AccordionProps> = ({ sections }) => {
);
};

const parseAnswer = (answer: string) => {
const lines = answer.split('\\n');

return lines.map((line, index) => {
if (line.includes('<a ')) {
const parts = line.split(/<a |<\/a>/g);
return (
<p key={index} className="px-4 py-2 text-sm text-black">
{parts.map((part, partIndex) => {
const match = part.match(/href="([^"]+)"/);
if (match) {
const href = match[1];
return (
<a
key={partIndex}
href={href}
target="_blank"
rel="noopener noreferrer"
style={{ fontSize: '0.875rem', textDecoration: 'underline' }}
>
{part.split('>')[1]}
</a>
);
}
return part;
})}
</p>
);
}

return (
<p key={index} className="px-4 py-2 text-sm text-black">
{line}
</p>
);
});
};

return (
<div className="py-20">
{sections.map((section, sectionIndex) => (
<div key={sectionIndex} className="mb-8">
<h3 className="mb-6 text-3xl font-bold capitalize text-white drop-shadow-md md:mb-8">
{section.section}
</h3>
<div className="grid gap-5 md:grid-cols-2">
<div className="mb-12 grid gap-[20px] md:grid-cols-2">
{sections.map((section, sectionIndex) => (
<div
key={sectionIndex}
className="flex flex-col gap-2 rounded-xl border border-black bg-white p-4 shadow-lg"
>
<h3 className="font-raleway text-[#404040] drop-shadow-lg mb-2 text-3xl font-bold capitalize">
{section.section}
</h3>

{section.content.map((item, questionIndex) => (
<div key={questionIndex} className="w-full">
<div
className={`flex cursor-pointer select-none items-center justify-between rounded-xl border border-black bg-white p-4 hover:bg-accordionHover ${
className={`flex justify-between items-center cursor-pointer select-none rounded-lg border border-black/20 bg-white p-4 hover:bg-gray-100 ${
activeIndex &&
activeIndex.section === sectionIndex &&
activeIndex.question === questionIndex
Expand All @@ -57,61 +100,77 @@ const Accordion: React.FC<AccordionProps> = ({ sections }) => {
}
role="button"
>
<h4 className="text-black">
<h4 className="flex-1 text-black">
{item.question}
</h4>
<IoIosArrowDown
className={`transition-transform duration-300 ${
activeIndex &&
activeIndex.section ===
sectionIndex &&
activeIndex.question ===
questionIndex
? 'rotate-180'
: 'rotate-0'
}`}
/>

<div className="flex-shrink-0">
{activeIndex &&
activeIndex.section === sectionIndex &&
activeIndex.question === questionIndex ? (
<LuMinus />
) : (
<LuPlus />
)}
</div>
</div>

<div
className={`overflow-hidden transition-all duration-300 ${
className={`overflow-hidden transition-all duration-300 ease-in-out ${
activeIndex &&
activeIndex.section === sectionIndex &&
activeIndex.question === questionIndex
? 'max-h-full'
: 'max-h-0 border-none'
} rounded-xl rounded-t-none border border-black bg-deepMarine`}
? 'max-h-full rounded-b-lg translate-y-0'
: 'max-h-0'
} bg-accordionHover/50`}
>
{item.answer
.split('\\n')
.map((line, idx, arr) => (
<React.Fragment key={idx}>
{line.includes('<a ') ? (
<p className="px-4 py-2 text-sm text-white">
<span
dangerouslySetInnerHTML={{
__html: line.replace(
/<a /g,
`<a style="font-size: 0.875rem; text-decoration: underline;" target="_blank" rel="noopener noreferrer" `
),
}}
className="text-sm"
/>
</p>
) : (
<p className="px-4 py-2 text-sm text-white">
{line}
</p>
)}
{idx < arr.length - 1}{' '}
</React.Fragment>
))}
{parseAnswer(item.answer)}
</div>
</div>
))}
</div>
</div>
))}
))}
</div>

<div className="flex w-full flex-col items-center justify-between gap-4 rounded-xl bg-white p-4 border border-black shadow-lg md:flex-row md:gap-0">
<span className="flex flex-col gap-2 text-center md:w-2/4 md:text-left">
<h3 className="font-bold font-raleway text-[#404040]"> Still have a question? </h3>
<p className="text-md">
No worries! Reach out to us via email at{' '}
<a
href="mailto:hello@hawkhacks.ca"
target="_blank"
rel="noopener noreferrer"
className="text-md underline"
>
hello@hawkhacks.ca
</a>{' '}
or on any of our{' '}
<a
href="https://linktr.ee/hawkhacks"
target="_blank"
rel="noopener noreferrer"
className="text-md underline"
>
socials
</a>
, and we'll get back to you as soon as our social media
person wakes up!
</p>
</span>
<Button
className="block w-fit bg-gradient-to-b from-tbrand to-tbrand-hover p-0 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition before:duration-100 before:hover:opacity-10"
tabIndex={-1}
type="button"
onClick={() => {
window.location.href = 'mailto:hello@hawkhacks.ca';
}}
>
<p className="px-12 py-3 text-base font-medium md:text-lg">
Get in Touch
</p>
</Button>
</div>
</div>
);
};
Expand Down
6 changes: 3 additions & 3 deletions src/components/sections/TeamFAQ.section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const Department: React.FC<DepartmentProps> = ({ title, members }) => {
className="aspect-square w-20 rounded-full object-cover lg:w-32"
src={member.profile}
alt={title}
loading="lazy"
loading='lazy'
/>

<div>
Expand Down Expand Up @@ -73,11 +73,11 @@ const TeamFAQSection = () => {

<section
id="team"
className="relative isolate mx-auto p-4 md:p-8 lg:p-12"
className="relative isolate p-4 md:-translate-y-[2%] md:p-8 lg:p-12 xl:-translate-y-[15%]"
>
<div className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32">
<img
className="mx-auto hidden w-full max-w-fit sm:block"
className="mx-auto hidden w-full max-w-fit sm:block md:mt-24"
src={MeetTheTeamBalloon}
alt=""
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/sections/data/faqData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const faqData = [
answer: 'Anybody can attend HawkHacks! From someone who doesn\'t know what a computer is, to someone who makes computers - everyone\'s welcome!\\nYou can either create a piece of software in 36 hours, attend the workshops and seminars, or do a bit of both - all up to you!',
},
{
question: '📅 When can I apply',
question: '📅 When can I apply?',
answer: 'Hacker, mentor, and volunteer applications open on April 7th, 2024 and are closing on May 3rd, 2024 at 11:59 PM!',
},
{
Expand Down

0 comments on commit cecd948

Please sign in to comment.