From b0ac55cdc28e889dc886729299d4e5a477301b7e Mon Sep 17 00:00:00 2001 From: starkjay21 Date: Mon, 25 Sep 2023 14:45:37 +0530 Subject: [PATCH 1/3] feat: added faq section --- .gitignore | 4 +- config/content/FAQ.js | 47 +++++++++ config/content/index.js | 2 +- src/components/FAQSection/AccordionItem.jsx | 33 +++++++ src/components/FAQSection/FAQSection.jsx | 39 ++++++++ src/components/FAQSection/PlusIcon.jsx | 47 +++++++++ src/components/FAQSection/styles.js | 101 ++++++++++++++++++++ src/pages/playground.js | 24 +---- 8 files changed, 272 insertions(+), 25 deletions(-) create mode 100644 config/content/FAQ.js create mode 100644 src/components/FAQSection/AccordionItem.jsx create mode 100644 src/components/FAQSection/FAQSection.jsx create mode 100644 src/components/FAQSection/PlusIcon.jsx create mode 100644 src/components/FAQSection/styles.js diff --git a/.gitignore b/.gitignore index 8746db0..e547ee2 100644 --- a/.gitignore +++ b/.gitignore @@ -85,7 +85,7 @@ typings/ .yarn-integrity # dotenv environment variables file -.env +.env.development .env.test .env*.local .env.development @@ -158,4 +158,4 @@ public # End of https://www.toptal.com/developers/gitignore/api/node,yarn,firebase .env.development -.DS_Store \ No newline at end of file +.DS_Store diff --git a/config/content/FAQ.js b/config/content/FAQ.js new file mode 100644 index 0000000..ced6abe --- /dev/null +++ b/config/content/FAQ.js @@ -0,0 +1,47 @@ +const FAQContent = [ + { + id: 1, + question: 'When would Innovision happen?', + answer: + 'INNOVISION is the largest ' + + 'techno-management fest of Eastern India lorem ipsum dolor ' + + 'ipsum dolor somethin lorem ipsum dolor somethin lorem ipsum dolor somethin', + }, + { + id: 2, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 3, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 4, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 5, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 6, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 7, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 8, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, +]; + +export default FAQContent; diff --git a/config/content/index.js b/config/content/index.js index 2564b6d..f19eb68 100644 --- a/config/content/index.js +++ b/config/content/index.js @@ -1,5 +1,5 @@ export { default as nav } from './Navigation'; export { default as footer } from './Footer'; - +export { default as faq } from './FAQ'; export { default as success } from './Success'; export { default as pageNotFound } from './PageNotFound'; diff --git a/src/components/FAQSection/AccordionItem.jsx b/src/components/FAQSection/AccordionItem.jsx new file mode 100644 index 0000000..660c336 --- /dev/null +++ b/src/components/FAQSection/AccordionItem.jsx @@ -0,0 +1,33 @@ +import React, { useRef, useState } from 'react'; +import { AnswerContainer, AnswerWrap, QuestionContainer, FAQWrapper, QuestionText } from './styles'; +import PlusIcon from './PlusIcon'; + +const AccordionItem = ({ question, answer, index }) => { + const key = index; + const [clicked, setClicked] = useState(false); + + const handleToggle = () => { + setClicked(clicked === key ? false : key); + }; + + const active = clicked === key; + + const contentEl = useRef(); + return ( + + + {question} + + + + {answer} + + + ); +}; + +export default AccordionItem; diff --git a/src/components/FAQSection/FAQSection.jsx b/src/components/FAQSection/FAQSection.jsx new file mode 100644 index 0000000..e372a82 --- /dev/null +++ b/src/components/FAQSection/FAQSection.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import AccordionItem from './AccordionItem'; +import FAQ from '../../../config/content/FAQ'; +import { FAQSectionContainer, FAQGrid, FAQFirstHalf, FAQSecondHalf } from './styles'; + +const FAQSection = () => { + const middleIndex = Math.ceil(FAQ.length / 2); + + const firstHalf = FAQ.splice(0, middleIndex); + const secondHalf = FAQ.splice(-middleIndex); + + return ( + + + + {firstHalf.map((item, index) => ( + + ))} + + + {secondHalf.map((item, index) => ( + + ))} + + + + ); +}; +export default FAQSection; diff --git a/src/components/FAQSection/PlusIcon.jsx b/src/components/FAQSection/PlusIcon.jsx new file mode 100644 index 0000000..180138d --- /dev/null +++ b/src/components/FAQSection/PlusIcon.jsx @@ -0,0 +1,47 @@ +import React from 'react'; +import styled from 'styled-components'; +import tw from 'twin.macro'; + +const PlusContainer = styled.div` + ${tw` + w-4 + h-4 + p-0 + m-0 + relative + `} +`; +const BarOne = styled.div` + ${tw` + `} + background-color: ${(props) => (props.active ? '#91F9D3' : '#D9D9D9')}; + width: 16px; + height: 2px; + position: absolute; + top: 7px; + left: 0; + transition: transform 100ms; + transform: ${(props) => (props.active ? 'rotate(180deg)' : 'rotate(90deg)')}; +`; + +const BarTwo = styled.div` + ${tw` + + `} + background-color: ${(props) => (props.active ? '#91F9D3' : '#D9D9D9')}; + width: 16px; + height: 2px; + transform: rotate(0deg); + position: absolute; + top: 7px; + left: 0; +`; + +const PlusIcon = ({ active }) => ( + + + + + ); + +export default PlusIcon; diff --git a/src/components/FAQSection/styles.js b/src/components/FAQSection/styles.js new file mode 100644 index 0000000..1522e4c --- /dev/null +++ b/src/components/FAQSection/styles.js @@ -0,0 +1,101 @@ +import styled from 'styled-components'; +import tw from 'twin.macro'; + +export const FAQSectionContainer = styled.div` + ${tw` + w-[90%] + mx-auto + `} +`; +export const FAQWrapper = styled.div` + ${tw` + w-full + border-b-2 + border-solid + border-[#707070] + `} + :last-child { + border-bottom: none; + } +`; +export const QuestionContainer = styled.div` + user-select: none; + ${tw` + pl-1 + md:pl-0 + pr-6 + mt-4 + flex + items-center + justify-between + w-full + text-color-secondary + cursor-pointer + `} + color: ${(props) => (props.active ? '#91F9D3' : '#D0D0D0')}; +`; + +export const QuestionText = styled.p` + ${tw` + font-Roslindale + text-[18px] + sm:text-[16px] + `} + font-style: italic; + font-weight: 600; + line-height: normal; +`; +export const AnswerContainer = styled.div` + ${tw` + mb-4 + `} + overflow: hidden; + transition: height 0.1s ease-in-out; +`; + +export const AnswerWrap = styled.div` + ${tw` + text-[14px] + sm:text-[12px] + pt-4 + `} + color: #FFF; + /* 360/Body/2/regular */ + font-family: Inter, serif; + font-style: normal; + font-weight: 400; + line-height: 16px; +`; +export const FAQGrid = styled.div` + ${tw` + w-full + flex + gap-8 + mt-4 + md:flex-col + md:gap-0 + `} +`; + +export const FAQFirstHalf = styled.div` + ${tw` + w-1/2 + md:w-full + `} + + @media(min-width: 761px) { + :last-child { + border-bottom: none; + } + } +`; + +export const FAQSecondHalf = styled.div` + ${tw` + w-1/2 + md:w-full + `} + :last-child { + border-bottom: none; + } +`; diff --git a/src/pages/playground.js b/src/pages/playground.js index 425a3aa..45bf690 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -1,16 +1,7 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import { Helmet } from 'react-helmet'; -import { - Body1, - Body2, - Heading1, - Heading2, - Heading3, - Heading4, - NavText, -} from '../components/shared'; -import Button from '../components/shared/Button'; +import FAQSection from '../components/FAQSection/FAQSection'; const Playground = () => ( <> @@ -19,18 +10,7 @@ const Playground = () => ( Playground - Heading 1 - Heading 2 - Heading 3 - Heading 4 - - Body 1 - Body 2 - Nav Text - -