diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx index 890e531e889121c1d9160350c636d736dc2895cb..3a4745b07f0be9e0a0e83e3cf2b010a0afeb1d36 100644 --- a/webapp/src/components/CollapsibleBox.tsx +++ b/webapp/src/components/CollapsibleBox.tsx @@ -5,10 +5,11 @@ import { GrAdd, GrSubtract } from 'react-icons/gr'; interface CollapsibleBoxProps { title: string; children: React.ReactNode; + startCollapsed?: boolean; } -const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => { - const [isCollapsed, setIsCollapsed] = useState(false); +const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children, startCollapsed }) => { + const [isCollapsed, setIsCollapsed] = useState(!!startCollapsed); return ( <div className='collapsible-box'> diff --git a/webapp/src/pages/CompendiumData.tsx b/webapp/src/pages/CompendiumData.tsx index 8af88698ee0e9a0406d52ac70e9de5ac63909980..c067a1f3db80ba4058c7b2c24b9139264b78a357 100644 --- a/webapp/src/pages/CompendiumData.tsx +++ b/webapp/src/pages/CompendiumData.tsx @@ -5,6 +5,7 @@ import PageHeader from "../components/global/PageHeader" import SectionLink from "../components/global/SectionLink"; import Banner from "../components/global/Banner"; import { Link } from "react-router-dom"; +import { Sections } from "../helpers/constants"; function CompendiumData(): ReactElement { return ( @@ -25,7 +26,7 @@ function CompendiumData(): ReactElement { <Row> <div className="center"> - <CollapsibleBox title="ORGANISATION"> + <CollapsibleBox title={Sections.Organisation}> <div className="collapsible-column"> <Row> @@ -71,11 +72,35 @@ function CompendiumData(): ReactElement { <span>NREN Involvement in European Commission Projects</span> </Link> </Row> + + </div> + </CollapsibleBox> + + <CollapsibleBox title={Sections.Policy} startCollapsed> + <div className="collapsible-column"> + <Row> <Link to="/policy" className="link-text-underline"> <span>NREN Policies</span> </Link> - </Row> + </Row> + + </div> + </CollapsibleBox> + + <CollapsibleBox title={Sections.ConnectedUsers} startCollapsed> + <div className="collapsible-column"> + <h5>Coming Soon</h5> + </div> + </CollapsibleBox> + <CollapsibleBox title={Sections.Network} startCollapsed> + <div className="collapsible-column"> + <h5>Coming Soon</h5> + </div> + </CollapsibleBox> + <CollapsibleBox title={Sections.Services} startCollapsed> + <div className="collapsible-column"> + <h5>Coming Soon</h5> </div> </CollapsibleBox> </div>