From 7e696995235ae83f1eb70f8f0e2fc840db1c8ac6 Mon Sep 17 00:00:00 2001
From: praptippradhan <praptiprachita2004@gmail.com>
Date: Wed, 3 Apr 2024 00:54:54 +0530
Subject: [PATCH] fix: made faq section collapsible

---
 pnpm-lock.yaml                     |  2 +-
 src/components/FaqSection/faq.jsx  | 45 ++++++++++------
 src/components/Gallery/gallery.jsx | 46 ++++++++++++++++
 src/config/content/galleryData.js  | 87 ++++++++++++++++++++++++++++++
 src/pages/playground.jsx           |  6 ---
 5 files changed, 163 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Gallery/gallery.jsx
 create mode 100644 src/config/content/galleryData.js

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f66774..c715b3d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,7 +51,7 @@ devDependencies:
     version: 8.56.0
   eslint-plugin-jsdoc:
     specifier: ^48.0.6
-    version: 48.0.6(eslint@8.56.0)
+    version: 48.0.6(eslint@8.56.0)1
   eslint-plugin-react:
     specifier: ^7.33.2
     version: 7.33.2(eslint@8.56.0)
diff --git a/src/components/FaqSection/faq.jsx b/src/components/FaqSection/faq.jsx
index c49476a..0335699 100644
--- a/src/components/FaqSection/faq.jsx
+++ b/src/components/FaqSection/faq.jsx
@@ -1,9 +1,19 @@
+import { useState } from 'react';
 import faqData from '../../config/content/faqData.js';
 import { PersonalizedText, Heading, Paragraph } from '../shared/index.js';
 
 function FAQ() {
 	const Header1 = faqData.Header1;
 	const Header2 = faqData.Header2;
+	const [openQuestion, setOpenQuestion] = useState(null);
+
+	const toggleQuestion = id => {
+		if (openQuestion === id) {
+			setOpenQuestion(null);
+		} else {
+			setOpenQuestion(id);
+		}
+	};
 
 	return (
 		<div className='md:w-[76%] w-[92%] justify-items-center mt-[10px] mb-[44px] mx-auto'>
@@ -22,24 +32,27 @@ function FAQ() {
 			</div>
 			<div className='flex flex-col items-start gap-[38px]'>
 				{faqData.questions.map(({ id, question, answer }) => (
-					<div className='flex flex-col justify-center gap-[10px]' key={id}>
-						<div className='flex gap-[10px] md:gap-[12px] flex-row'>
-							<img className='h-[32px] aspect-square' src={faqData.img.src} alt={faqData.img.alt} />
+					<div
+						key={id}
+						className='flex flex-col justify-center gap-[10px] pb-[20px] w-full border-b-2 border-solid border-[#252525]'>
+						<div className='flex gap-[10px] md:gap-[12px] flex-row cursor-pointer' onClick={() => toggleQuestion(id)}>
+							{openQuestion === id ? <Heading variant='h3'>-</Heading> : <Heading variant='h3'>+</Heading>}
 							<Heading variant='h3'>{question}</Heading>
 						</div>
-						{answer instanceof Array ? (
-							<ul className='list-[square] px-7'>
-								{answer.map(({ key, content, bulleted }) => (
-									<li key={key} className={bulleted ? '' : 'list-none'}>
-										<Paragraph variant='body3'>{content}</Paragraph>
-									</li>
-								))}
-							</ul>
-						) : (
-							<Paragraph variant='body3' className='ml-[18]'>
-								{answer}
-							</Paragraph>
-						)}
+						{openQuestion === id &&
+							(answer instanceof Array ? (
+								<ul className='list-[square] px-7'>
+									{answer.map(({ key, content, bulleted }) => (
+										<li key={key} className={bulleted ? '' : 'list-none'}>
+											<Paragraph variant='body3'>{content}</Paragraph>
+										</li>
+									))}
+								</ul>
+							) : (
+								<Paragraph variant='body3' className='ml-[18]'>
+									{answer}
+								</Paragraph>
+							))}
 					</div>
 				))}
 			</div>
diff --git a/src/components/Gallery/gallery.jsx b/src/components/Gallery/gallery.jsx
new file mode 100644
index 0000000..bdb21f3
--- /dev/null
+++ b/src/components/Gallery/gallery.jsx
@@ -0,0 +1,46 @@
+import galleryData from '../../config/content/galleryData.js';
+import { Heading, Text } from '../shared/index.js';
+
+function Gallery() {
+	return (
+		<div className='w-[90%] mx-auto flex flex-col items-center mb-[40px] gap-y-[105px]'>
+			<Heading
+				variant='h1'
+				style={{
+					fontSize: '80px',
+					color: '#F2DA05',
+					textShadow: '4.608px 4.608px 0px #000',
+					webkitTextStrokeWidth: '2.71052622795105',
+					webkitTextStrokeColor: '#252525',
+				}}>
+				{galleryData.headerText}
+			</Heading>
+			<div className='w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-[45px] gap-y-[70px]'>
+				{galleryData.images.map(({ id, src, alt }) => (
+					<div
+						key={id}
+						style={{
+							borderRadius: '4.5px',
+							border: '0.75px solid #000',
+							padding: '10.2px 9px 55.3px 9px',
+							background: '#FFF',
+							boxShadow: '1.5px 2.25px 0px 0px #000',
+						}}>
+						<img src={src} alt={alt} className='w-full h-auto object-cover' />
+					</div>
+				))}
+			</div>
+			<div className='w-full flex justify-end'>
+				<button
+					className='px-[18px] py-[12px] rounded-[14px] border-[3px] border-solid border-[#000]'
+					style={{
+						background: 'var(--Accent-Yellow, #F2DA05)',
+					}}>
+					<Text variant='navButton'>{galleryData.buttonText}</Text>
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default Gallery;
diff --git a/src/config/content/galleryData.js b/src/config/content/galleryData.js
new file mode 100644
index 0000000..6d9b7a9
--- /dev/null
+++ b/src/config/content/galleryData.js
@@ -0,0 +1,87 @@
+export default {
+	id: 'Gallery',
+	headerText: 'GALLERY',
+	buttonText: 'Back',
+	images: [
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+	],
+};
diff --git a/src/pages/playground.jsx b/src/pages/playground.jsx
index a6d0c87..c48211f 100644
--- a/src/pages/playground.jsx
+++ b/src/pages/playground.jsx
@@ -1,15 +1,9 @@
 import FAQ from '../components/FaqSection/faq.jsx';
-import Footer from '../components/shared/marginals/footer.jsx';
-import AboutUs from '../components/AboutUs.jsx';
-import NavBar from '../components/shared/NavBar';
 
 export default function Playground() {
 	return (
 		<>
-			<NavBar />
-			<AboutUs />
 			<FAQ />
-			<Footer />
 		</>
 	);
 }