Merge pull request #286 from GTBitsOfGood/Tian/collapsible

Tian/collapsible

src/components/collapsible/collapsible.css

@@ -0,0 +1,42 @@
+.collapsible .content {
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+    width: 100%;
+}
+
+.collapsible .content.open {
+    max-height: 1000px;
+}
+
+.container {
+    background: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-break: auto;
+    padding: 16px;
+}
+
+.collapsible {
+    text-align: left;
+    margin: 1rem;
+    box-shadow: 0px 2px 5px #00000040;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.collapsible .title{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    gap: 8px;
+    font-weight: bold;
+    background: rgba(19, 70, 170, 0.06);
+    border: 0;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+    width: 100%;
+}

src/components/collapsible/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useState, useRef} from "react";
+import './collapsible.css';
+import {FaAngleDown, FaAngleUp } from "react-icons/fa";
+
+//This is collapsible component, use it as if you are using any pre-designed component
+//Specify the Style of collapsible component as if you were styling a div using style prompt
+const Collapsible = ({style = {}, label, children}) => {
+    const [isOpen, setOpen] = useState(false)
+    const contentRef = useRef(null)
+    const toogle = () => {setOpen(!isOpen)}
+    return (
+        <div className = "collapsible" style={style}>
+            <button onClick={toogle} className="title">{label}{!isOpen ? (
+                <FaAngleDown />
+              ) : (
+                <FaAngleUp />
+              )}</button>
+            <div ref={contentRef} 
+                className={`content ${isOpen ? 'open' : ''}`}
+                style={{ maxHeight: isOpen ? `${contentRef.current.scrollHeight}px` : '0px' }}>
+                    <div className="container">{children}</div>
+                </div>
+        </div>
+    )
+}
+
+export default Collapsible;