CollapsibleBox.tsx

import React, { useState } from 'react';
import { Col, Row } from 'react-bootstrap';
import { AiOutlineClose, AiOutlinePlus } from 'react-icons/ai';

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

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

  return (
    <div className='collapsible-box p-0'>
      <Row>
        <Col>
          <h1 className="bold-caps-16pt dark-teal pt-3 ps-3">{title}</h1>
        </Col>
        <Col className='flex-grow-0 flex-shrink-0'>
          <div className="toggle-btn p-2" onClick={() => setIsCollapsed(!isCollapsed)}>
              {isCollapsed ?
                <AiOutlinePlus style={{ color: 'white', paddingBottom: "3px", marginTop: "3px", marginLeft: "3px", scale: "1.3"}} /> :
                <AiOutlineClose style={{ color: 'white', paddingBottom: "3px", marginTop: "3px", marginLeft: "3px", scale: "1.3"}} />}
          </div>
        </Col>
      </Row>



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

    </div>
  );
};

export default CollapsibleBox;