39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import React, {JSX, useState} from "react";
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {faChevronDown, faChevronRight} from '@fortawesome/free-solid-svg-icons';
|
|
|
|
export interface CollapseProps {
|
|
title: string;
|
|
content: JSX.Element;
|
|
}
|
|
|
|
export default function Collapse({title, content}: CollapseProps) {
|
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
|
|
function toggleCollapse(): void {
|
|
setIsOpen(!isOpen);
|
|
}
|
|
|
|
return (
|
|
<div className="mb-4 shadow-md hover:shadow-lg transition-all duration-200">
|
|
<button
|
|
onClick={toggleCollapse}
|
|
className={`w-full text-left bg-secondary/50 hover:bg-secondary transition-all duration-200 p-4 flex items-center justify-between group border border-secondary/50 ${
|
|
isOpen ? 'rounded-t-xl' : 'rounded-xl'
|
|
}`}
|
|
>
|
|
<span className="text-text-primary font-medium">{title}</span>
|
|
<FontAwesomeIcon
|
|
icon={isOpen ? faChevronDown : faChevronRight}
|
|
className="text-primary w-4 h-4 transition-transform group-hover:scale-110"
|
|
/>
|
|
</button>
|
|
{isOpen && (
|
|
<div
|
|
className="bg-secondary/30 border-l-4 border-primary p-4 rounded-b-xl border border-t-0 border-secondary/50 animate-fadeIn">
|
|
<div className="text-text-primary">{content}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |