fix: made faq section collapsible

dscnitrourkela · Apr 2, 2024 · 7e69699 · 7e69699
1 parent c56e38a
commit 7e69699
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 23 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git 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
@@ -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
@@ -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
@@ -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 />
 		</>
 	);
 }