53 lines
2.1 KiB
TypeScript
53 lines
2.1 KiB
TypeScript
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faChevronDown, faChevronUp, IconDefinition} from "@fortawesome/free-solid-svg-icons";
|
|
import React from "react";
|
|
|
|
interface CollapsableAreaProps {
|
|
title: string;
|
|
children: React.ReactNode;
|
|
icon?: IconDefinition;
|
|
}
|
|
|
|
export default function CollapsableArea(
|
|
{
|
|
title,
|
|
children,
|
|
icon,
|
|
}: CollapsableAreaProps) {
|
|
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
|
|
return (
|
|
<div
|
|
className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-4 border border-secondary/50 mb-4 shadow-md hover:shadow-lg transition-all duration-200">
|
|
<button
|
|
className="flex justify-between items-center w-full text-left group hover:scale-[1.02] transition-all duration-200"
|
|
onClick={() => setIsExpanded(!isExpanded)}>
|
|
<div className="flex items-center">
|
|
{
|
|
icon && (
|
|
<div
|
|
className="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-200">
|
|
<FontAwesomeIcon
|
|
icon={icon}
|
|
className="text-white w-4 h-4 group-hover:rotate-12 transition-transform duration-200"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
<span className="text-text-primary font-bold">{title}</span>
|
|
</div>
|
|
<FontAwesomeIcon
|
|
icon={isExpanded ? faChevronUp : faChevronDown}
|
|
className="text-primary w-5 h-5 group-hover:scale-110 transition-all duration-200"
|
|
/>
|
|
</button>
|
|
|
|
{isExpanded && (
|
|
<div className="mt-4 p-3 bg-secondary/20 rounded-lg border border-secondary/30 animate-fadeIn">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|