25 lines
1.4 KiB
TypeScript
25 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import type { AccordionItemProps } from '../../types';
|
|
|
|
export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle }) => (
|
|
<div className={`group relative bg-white rounded-2xl shadow-lg border border-gray-200 transition-all duration-300 overflow-hidden ${isOpen ? 'shadow-2xl border-blue-300 scale-[1.01]' : ''} hover:shadow-xl hover:border-blue-300`}>
|
|
{/* Overlay effect on hover */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
|
|
|
|
<div
|
|
className="relative z-10 p-6 sm:p-8 cursor-pointer flex items-center justify-between font-semibold text-gray-900 transition-all duration-200 text-base sm:text-lg select-none hover:text-blue-700"
|
|
onClick={onToggle}
|
|
>
|
|
<div className="flex items-center flex-1 mr-4 font-heading">{title}</div>
|
|
<span className={`text-xl sm:text-2xl transition-transform duration-300 text-blue-600 flex-shrink-0 ${isOpen ? 'rotate-180' : ''}`}>
|
|
▼
|
|
</span>
|
|
</div>
|
|
<div className={`relative z-10 transition-all duration-500 overflow-hidden ${isOpen ? 'max-h-[1000px] pb-6 px-6 sm:pb-8 sm:px-8' : 'max-h-0'}`}>
|
|
<div className="text-gray-700 leading-relaxed text-sm sm:text-base">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|