From e4c740a999e2860c658fdb2b5644a2dd0c127f9f Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Tue, 23 May 2023 15:19:41 +0200
Subject: [PATCH] Add collapsible boxes for all sections
---
webapp/src/components/CollapsibleBox.tsx | 5 ++--
webapp/src/pages/CompendiumData.tsx | 29 ++++++++++++++++++++++--
2 files changed, 30 insertions(+), 4 deletions(-)
diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx
index 890e531e..3a4745b0 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 8af88698..c067a1f3 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>
--
GitLab