|
| 1 | +import React, { useState, useEffect } from 'react'; |
| 2 | +import { useRouter } from 'next/router'; |
| 3 | + |
| 4 | +interface AccordionItem { |
| 5 | + question: string; |
| 6 | + answer: string; |
| 7 | + id: number; |
| 8 | +} |
| 9 | + |
| 10 | +interface AccordionProps { |
| 11 | + items: AccordionItem[]; |
| 12 | +} |
| 13 | + |
| 14 | +const Accordion: React.FC<AccordionProps> = ({ items }) => { |
| 15 | + const [activeIndex, setActiveIndex] = useState<number | null>(null); |
| 16 | + const router = useRouter(); |
| 17 | + |
| 18 | + const handleToggle = (index: number) => { |
| 19 | + setActiveIndex((prevIndex) => (prevIndex === index ? null : index)); |
| 20 | + }; |
| 21 | + |
| 22 | + useEffect(() => { |
| 23 | + const hash = router.asPath.split('#')[1]; |
| 24 | + if (hash) { |
| 25 | + const id = parseInt(hash, 10); |
| 26 | + const index = items.findIndex((item) => item.id === id); |
| 27 | + if (index !== -1) { |
| 28 | + setActiveIndex(index); |
| 29 | + |
| 30 | + setTimeout(() => { |
| 31 | + const element = document.getElementById(hash); |
| 32 | + if (element) { |
| 33 | + const navbarHeight = 150; |
| 34 | + const offset = element.offsetTop - navbarHeight; |
| 35 | + window.scrollTo({ top: offset, behavior: 'smooth' }); |
| 36 | + } |
| 37 | + }, 0); |
| 38 | + } |
| 39 | + } |
| 40 | + }, [items, router.asPath]); |
| 41 | + |
| 42 | + const handleLinkClick = (id: number) => { |
| 43 | + const index = items.findIndex((item) => item.id === id); |
| 44 | + setActiveIndex(index); |
| 45 | + |
| 46 | + const newUrl = `#${id}`; |
| 47 | + router.push(newUrl, undefined, { shallow: true }); |
| 48 | + }; |
| 49 | + |
| 50 | + return ( |
| 51 | + <div> |
| 52 | + {items.map((item, index) => ( |
| 53 | + <div |
| 54 | + key={item.id || index} |
| 55 | + className={`overflow-hidden transition-max-height border-t-2 ${ |
| 56 | + activeIndex === index ? 'max-h-96' : 'max-h-20' |
| 57 | + } ${index === items.length - 1 ? 'border-b-2' : ''}`} |
| 58 | + > |
| 59 | + <div className='flex justify-between p-4 pl-2 cursor-pointer'> |
| 60 | + <div className='text-[20px]'> |
| 61 | + <a |
| 62 | + href={`#${item.id}`} |
| 63 | + onClick={(e) => { |
| 64 | + e.preventDefault(); |
| 65 | + handleLinkClick(item.id); |
| 66 | + }} |
| 67 | + > |
| 68 | + {item.question} |
| 69 | + </a> |
| 70 | + </div> |
| 71 | + <div |
| 72 | + className={`transform transition-transform duration-200 max-h-7 text-[20px] ${ |
| 73 | + activeIndex === index ? 'rotate-45' : '' |
| 74 | + }`} |
| 75 | + onClick={() => handleToggle(index)} |
| 76 | + > |
| 77 | + + |
| 78 | + </div> |
| 79 | + </div> |
| 80 | + {activeIndex === index && ( |
| 81 | + <div |
| 82 | + id={`${item.id}`} |
| 83 | + className='p-2 text-gray-500 dark:text-slate-200 pb-4' |
| 84 | + > |
| 85 | + {item.answer} |
| 86 | + </div> |
| 87 | + )} |
| 88 | + </div> |
| 89 | + ))} |
| 90 | + </div> |
| 91 | + ); |
| 92 | +}; |
| 93 | + |
| 94 | +export default Accordion; |
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4&size=40){kind=avatar}
0 commit comments