75 lines
No EOL
2.8 KiB
JavaScript
75 lines
No EOL
2.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
const Accordion = ({ items }) => {
|
|
const [openIndex, setOpenIndex] = useState(0); // Start with first item open
|
|
|
|
const toggleItem = (index) => {
|
|
setOpenIndex(openIndex === index ? null : index);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`mb-4 border border-dark-600 rounded-lg overflow-hidden transition-all duration-300 ${
|
|
openIndex === index ? 'shadow-lg' : 'shadow'
|
|
}`}
|
|
>
|
|
<button
|
|
onClick={() => toggleItem(index)}
|
|
className={`w-full flex items-center justify-between text-left p-5 font-medium transition-colors ${
|
|
openIndex === index
|
|
? 'bg-dark-700 text-white'
|
|
: 'bg-dark-800 text-gray-300 hover:bg-dark-700'
|
|
}`}
|
|
aria-expanded={openIndex === index}
|
|
>
|
|
<span className="text-lg">{item.title}</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={`h-5 w-5 transition-transform duration-300 ${openIndex === index ? 'transform rotate-180' : ''}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div
|
|
className={`overflow-hidden transition-all duration-300 ease-in-out ${
|
|
openIndex === index ? 'max-h-96' : 'max-h-0'
|
|
}`}
|
|
>
|
|
<div className="p-5 bg-dark-700 border-t border-dark-600">
|
|
<p className="text-gray-300 mb-4">{item.content}</p>
|
|
|
|
<div className="mt-4 border-l-4 border-primary-500 pl-4">
|
|
<p className="text-primary-400 font-semibold mb-2">Our Solution:</p>
|
|
<p className="text-gray-300">{item.solution}</p>
|
|
</div>
|
|
|
|
{item.resources && (
|
|
<div className="mt-4 pt-4 border-t border-dark-600">
|
|
<p className="text-white font-medium mb-2">Helpful Resources:</p>
|
|
<ul className="list-disc list-inside text-primary-400 space-y-1">
|
|
{item.resources.map((resource, i) => (
|
|
<li key={i}>
|
|
<a href={resource.url} className="hover:text-primary-300 transition-colors" target="_blank" rel="noopener noreferrer">
|
|
{resource.title}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Accordion; |