dotechbro/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

updated by claude

Browse source
This commit is contained in:
mike 2025-03-08 20:11:52 -05:00
parent 49b28ffbc6
commit cb303cc61e
15 changed files with 1489 additions and 295 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/components/Accordion.jsx
View file

@ -1,34 +1,75 @@
import React, { useState } from 'react';
const Accordion = ({ items }) => {
const [openIndex, setOpenIndex] = useState(null);
const [openIndex, setOpenIndex] = useState(0); // Start with first item open
const toggleItem = (index) => {
setOpenIndex(openIndex === index ? null : index);
};
const toggleItem = (index) => {
setOpenIndex(openIndex === index ? null : index);
};
return (
<div className="w-full bg-white p-8 rounded-lg shadow-lg mb-16">
<h3 className="text-2xl font-semibold text-center mb-4 text-gray-900">Conquering Challenges: Practical Tips for Diverse Talent</h3>
{items.map((item, index) => (
<div key={index} className="mb-4">
<button
onClick={() => toggleItem(index)}
className="w-full text-left text-lg font-semibold text-gray-800 bg-gray-100 p-4 rounded-lg shadow-md hover:bg-gray-300 transition duration-300"
>
{item.title}
</button>
{openIndex === index && (
<div className="mt-2 p-4 bg-gray-200 rounded-lg shadow-inner">
<p className="text-gray-700">{item.content}</p>
<p className="mt-2 text-gray-700 font-semibold">Solution:</p>
<p className="text-gray-700">{item.solution}</p>
</div>
)}
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;