⬅️ Back to Table of Contents

📄 Expander.tsx

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	6
💠 JSX Elements	6
📐 Interfaces	1

📚 Table of Contents

• Imports
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

📂 packages/website/src/components/layout/Expander.tsx

📦 Imports

Name	Source
Collapsible	@docusaurus/theme-common
useCollapsible	@docusaurus/theme-common
ArrowIcon	@site/src/icons/arrow.svg
clsx	clsx
React	react
styles	./Expander.module.css

---

JSX Elements

Component	Type	Props	Children
div	element	className={clsx(styles.expander, props.className)}	,
button	element	className={styles.heading}, onClick={toggleCollapsed}	,
ArrowIcon	component	className={clsx(styles.arrow, !collapsed && styles.expandedArrow)}	none
span	element	className={styles.headerLabel}	{props.label}
Collapsible	component	as="div", collapsed={collapsed}, lazy={false}
div	element	className={styles.children}	{props.children}

---

Functions

Expander(props: ExpanderProps): React.JSX.Element

Code

function Expander(props: ExpanderProps): React.JSX.Element {
  const { collapsed, toggleCollapsed } = useCollapsible({
    initialState: false,
  });

  return (
    <div className={clsx(styles.expander, props.className)}>
      <button className={styles.heading} onClick={toggleCollapsed}>
        <ArrowIcon
          className={clsx(styles.arrow, !collapsed && styles.expandedArrow)}
        />
        <span className={styles.headerLabel}>{props.label}</span>
      </button>
      <Collapsible as="div" collapsed={collapsed} lazy={false}>
        <div className={styles.children}>{props.children}</div>
      </Collapsible>
    </div>
  );
}

• Parameters:
• props: ExpanderProps
• Return Type: React.JSX.Element
• Calls:
• useCollapsible (from @docusaurus/theme-common)
• clsx (from clsx)

---

Interfaces

ExpanderProps

Interface Code

export interface ExpanderProps {
  readonly children?: React.ReactNode;
  readonly className?: string;
  readonly label: string;
}

Properties

Name	Type	Optional	Description
children	React.ReactNode	✓
className	string	✓
label	string	✗

---