27 lines
766 B
TypeScript
27 lines
766 B
TypeScript
import { useState, ReactNode } from 'react';
|
|
import './Folder.css';
|
|
|
|
interface FolderProps {
|
|
title: string;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export default function Folder({ title, children }: FolderProps): ReactNode {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="folder-item">
|
|
<div className="folder-header" onClick={() => setIsOpen(!isOpen)}>
|
|
<span>{title}</span>
|
|
{/* 使用同一个字符配合旋转动画，视觉更连贯 */}
|
|
<span className={`arrow ${isOpen ? 'show-arrow' : ''}`}>▼</span>
|
|
</div>
|
|
|
|
{children && (
|
|
<div className={`folder-content ${isOpen ? 'show' : ''}`}>
|
|
<div className="content-inner">{children}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |