Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue #229-Fix FAQ UI and added feature toggle functionality on mobile devices #240

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Issue #229-Fix FAQ UI and added feature toggle functionality on mobile devices #240

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 39 additions & 38 deletions site/components/Faq.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { HelpCircle, Info, CheckCircle, XCircle } from 'lucide-react';
import { HelpCircle, Info, CheckCircle, Settings } from 'lucide-react';

const Faq = () => {
const [activeIndex, setActiveIndex] = useState(null);
Expand All @@ -20,7 +20,7 @@ const Faq = () => {
},
{
question: 'How can I create a BioTree?',
answer: 'To create your BioTree, simply sign up, create an account, and start adding your social media links to your profile. It’s quick and easy!',
answer: 'To create your BioTree, simply sign up, create an account, and start adding your social media links to your profile. It\'s quick and easy!',
icon: <Info className="w-8 h-8 text-green-600" />
},
{
Expand All @@ -31,7 +31,7 @@ const Faq = () => {
{
question: 'Can I customize my BioTree?',
answer: 'Absolutely! You can customize the appearance of your BioTree by selecting from various themes and layouts to match your personal style or brand.',
icon: <CheckCircle className="w-8 h-8 text-yellow-600" />
icon: <Settings className="w-8 h-8 text-purple-600" />
}
];

Expand All @@ -40,44 +40,45 @@ const Faq = () => {
<h2 className="text-4xl font-extrabold text-center mb-10 text-gray-800">Frequently Asked Questions</h2>
<div className="space-y-8">
{faqData.map((faq, index) => (
<div
key={index}
className={`faq-item-container bg-white rounded-lg shadow-lg p-6 flex transition-transform transform
cursor-pointer hover:scale-105 hover:shadow-xl hover:bg-gray-50 duration-300 ease-in-out
${activeIndex === index ? 'bg-gray-100 border border-gray-300' : ''}`}
onMouseEnter={() => handleMouseEnter(index)}
onMouseLeave={handleMouseLeave}
>
<div className="flex items-start mb-2 space-x-4">
<div className="flex-shrink-0">
{/* Inline style for 360-degree rotation */}
<span
style={{
display: 'inline-block',
transition: 'transform 0.3s ease-in-out',
transform: activeIndex === index ? 'rotate(360deg)' : 'rotate(0deg)',
}}
>
{faq.icon}
</span>
</div>
<div>
<h3 className="text-2xl font-semibold text-gray-800">{faq.question}</h3>
</div>
</div>
<div
className={`overflow-hidden transition-all duration-700 ease-in-out
${activeIndex === index ? 'max-h-[200px] opacity-100' : 'max-h-0 opacity-0'}`}
style={{ height: activeIndex === index ? 'auto' : '0px' }}
>
<p className="text-gray-600 leading-relaxed transition-opacity duration-500">{faq.answer}</p>
</div>
<span className="text-sm text-gray-500 mt-2">{activeIndex === index ? 'Hide' : 'Show'} Answer</span>
</div>
<div
key={index}
className={`faq-item-container bg-white rounded-lg shadow-lg p-6 transition-transform transform
cursor-pointer hover:scale-105 hover:shadow-xl hover:bg-gray-50 duration-300 ease-in-out
${activeIndex === index ? 'bg-gray-100 border border-gray-300' : ''}`}
onMouseEnter={() => handleMouseEnter(index)}
onMouseLeave={handleMouseLeave}
onClick={() => setActiveIndex(activeIndex === index ? null : index)} // Add this line
>
<div className="flex items-start mb-4 space-x-4 justify-between">
<div className='flex'>
<div className="flex-shrink-0">
<span
style={{
display: 'inline-block',
transition: 'transform 0.3s ease-in-out',
transform: activeIndex === index ? 'rotate(360deg)' : 'rotate(0deg)',
}}
>
{faq.icon}
</span>
</div>

<h3 className="text-2xl font-semibold text-gray-800 ml-4">{faq.question}</h3>
</div>
<span className="text-sm text-gray-500 mt-2 ml-auto">{activeIndex === index ? 'Hide' : 'Show'} Answer</span>
</div>
<div
className={`overflow-hidden transition-all duration-700 ease-in-out
${activeIndex === index ? 'max-h-[200px] opacity-100' : 'max-h-0 opacity-0'}`}
style={{ height: activeIndex === index ? 'auto' : '0px' }}
>
<p className="text-gray-600 leading-relaxed transition-opacity duration-500 ml-12">{faq.answer}</p>
</div>
</div>
))}
</div>
</div>
);
};

export default Faq;
export default Faq;