CollapsibleBox.tsx

import React, { useState } from 'react';
import { Col, Row } from 'react-bootstrap';

interface CollapsibleBoxProps {
  title: string;
  children: React.ReactNode;
}

const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <div className='collapsible-box'>
      <Row>
        <Col>
          <h1 className="bold-caps-16pt dark-teal">{title}</h1>
        </Col>
        <Col align="right">
          <button onClick={() => setIsCollapsed(!isCollapsed)}>
            {isCollapsed ? 'Expand' : 'Collapse'}
          </button>
        </Col>
      </Row>



      {!isCollapsed && <div className='collapsible-content'>
        {children}
      </div>}

    </div>
  );
};

export default CollapsibleBox;