29 lines
1.4 KiB
TypeScript
29 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
// Définir l'interface localement :
|
|
interface AccordionItemProps {
|
|
title: string;
|
|
children: React.ReactNode;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle }) => (
|
|
<div className={`bg-gradient-to-br from-banquise-blue-dark/15 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl overflow-hidden border border-banquise-blue-lightest/30 transition-all duration-300 shadow-sm ${isOpen ? 'shadow-xl border-banquise-blue-lightest/50 scale-[1.01]' : ''} hover:shadow-lg hover:border-banquise-blue-lightest/40`}>
|
|
<div
|
|
className="p-4 sm:p-6 md:p-8 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray transition-all duration-200 text-base sm:text-lg select-none hover:bg-banquise-blue-dark/10 active:bg-banquise-blue-dark/15"
|
|
onClick={onToggle}
|
|
>
|
|
<span className="flex items-center flex-1 mr-4 font-heading">{title}</span>
|
|
<span className={`text-xl sm:text-2xl transition-transform duration-300 text-banquise-blue-lightest flex-shrink-0 ${isOpen ? 'rotate-180' : ''}`}>
|
|
▼
|
|
</span>
|
|
</div>
|
|
<div className={`transition-all duration-500 overflow-hidden ${isOpen ? 'max-h-[1000px] pb-4 px-4 sm:pb-6 sm:px-6 md:pb-8 md:px-8' : 'max-h-0'}`}>
|
|
<div className="text-banquise-gray/90 leading-relaxed text-sm sm:text-base">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|