76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useRef, useEffect } from 'react'
|
|
import { IoIosAdd, IoIosClose } from 'react-icons/io'
|
|
import { AccordionProps } from '@/app/types'
|
|
|
|
const Accordion: React.FC<AccordionProps> = ({ title, content }) => {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const contentRef = useRef<HTMLDivElement>(null)
|
|
const [contentHeight, setContentHeight] = useState<number>(0)
|
|
|
|
useEffect(() => {
|
|
if (contentRef.current) {
|
|
setContentHeight(contentRef.current.scrollHeight)
|
|
}
|
|
}, [content])
|
|
|
|
const renderContent = () => {
|
|
if (typeof content === 'string') {
|
|
return (
|
|
<div
|
|
className="text-md font-medium [&>ol]:list-decimal [&>ol]:pl-4 [&_ul]:list-disc [&_ul]:py-2 [&_ul]:pl-4 [&_li]:mb-2 [&_p]:mt-1 [&_a]:text-orange [&_a]:hover:underline"
|
|
dangerouslySetInnerHTML={{ __html: content }}
|
|
/>
|
|
)
|
|
}
|
|
return <div className="text-md font-medium">{content}</div>
|
|
}
|
|
|
|
return (
|
|
<div className="relative bg-white rounded-2xl my-4">
|
|
<button
|
|
className="flex justify-between items-center py-4 px-6 hover:bg-gray-50 rounded-2xl space-x-9 w-full"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
<h3 className="text-xl font-bold text-left">{title}</h3>
|
|
<div className="w-6 h-6 flex items-center justify-center rounded-full border border-orange">
|
|
<div
|
|
className={`transition-all duration-500 ${
|
|
isOpen ? 'rotate-180' : 'rotate-0'
|
|
}`}
|
|
>
|
|
{isOpen ? (
|
|
<IoIosClose className="w-5 h-5 text-orange" />
|
|
) : (
|
|
<IoIosAdd className="w-5 h-5 text-orange" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<div
|
|
ref={contentRef}
|
|
style={
|
|
{ '--accordion-height': `${contentHeight}px` } as React.CSSProperties
|
|
}
|
|
className={`
|
|
grid
|
|
transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]
|
|
${
|
|
isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
|
|
}
|
|
`}
|
|
>
|
|
<div className="overflow-hidden">
|
|
<div className=" rounded-xl px-6 mt-2">
|
|
<div className="py-4">{renderContent()}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Accordion
|