LZH-YS1998
27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
import { useState, type ReactNode } from 'react'
|
|
|
|
interface CollapsibleSectionProps {
|
|
icon: string
|
|
title: string
|
|
count: number
|
|
extra?: ReactNode
|
|
children: ReactNode
|
|
defaultExpanded?: boolean
|
|
}
|
|
|
|
export function CollapsibleSection({ icon, title, count, extra, children, defaultExpanded = false }: CollapsibleSectionProps) {
|
|
const [expanded, setExpanded] = useState(defaultExpanded)
|
|
return (
|
|
<div className="myorg-collapsible">
|
|
<button className="myorg-collapsible-toggle" onClick={() => setExpanded(!expanded)}>
|
|
<span className="myorg-toggle-icon">{expanded ? '\u25BE' : '\u25B8'}</span>
|
|
<img src={icon} alt="" className="myorg-section-icon" />
|
|
<span className="myorg-collapsible-title">{title}</span>
|
|
<span className="myorg-collapsible-count">{count}</span>
|
|
{extra && <span className="myorg-collapsible-extra" onClick={e => e.stopPropagation()}>{extra}</span>}
|
|
</button>
|
|
{expanded && <div className="myorg-collapsible-body">{children}</div>}
|
|
</div>
|
|
)
|
|
}
|