43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { CheckCircleIcon, CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
|
|
|
|
interface CustomAccordionSectionProps {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
isOpen: boolean;
|
|
hasData: boolean;
|
|
onToggle: () => void;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const CustomAccordionSection: React.FC<CustomAccordionSectionProps> = ({
|
|
icon,
|
|
title,
|
|
isOpen,
|
|
hasData,
|
|
onToggle,
|
|
children,
|
|
}) => {
|
|
return (
|
|
<div className="border border-[#E3EDE5] rounded-[12px] bg-[#F8FAF8]">
|
|
<button
|
|
type="button"
|
|
onClick={onToggle}
|
|
className="w-full flex items-center gap-2 px-4 py-3.5 text-left"
|
|
>
|
|
{icon}
|
|
<span className="text-[11px] font-bold text-gray-700 uppercase tracking-wider flex-1">{title}</span>
|
|
{!isOpen && hasData && <CheckCircleIcon size={18} className="text-[#1B9869]" weight="fill" />}
|
|
{isOpen ? (
|
|
<CaretUpIcon size={16} className="text-gray-500" />
|
|
) : (
|
|
<CaretDownIcon size={16} className="text-gray-500" />
|
|
)}
|
|
</button>
|
|
{isOpen && <div className="px-4 pb-4 pt-3">{children}</div>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CustomAccordionSection;
|