From 3f774cfa6d69f5c96de29f54c33a33fba7f9646f Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 3 Aug 2023 17:23:44 +0200
Subject: [PATCH] Use `<main>` instead of `<div>` in `BoardMainTaskGroups`

---
 todoblue/src/app/board/[board]/BoardMain.tsx  | 22 +++++++++++++++++++
 .../app/board/[board]/BoardMainTaskGroups.tsx |  4 ++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 todoblue/src/app/board/[board]/BoardMain.tsx

diff --git a/todoblue/src/app/board/[board]/BoardMain.tsx b/todoblue/src/app/board/[board]/BoardMain.tsx
new file mode 100644
index 0000000..db38288
--- /dev/null
+++ b/todoblue/src/app/board/[board]/BoardMain.tsx
@@ -0,0 +1,22 @@
+import {BoardMainTaskGroups} from "@/app/board/[board]/BoardMainTaskGroups"
+import {BoardMainIcon} from "@/app/board/[board]/BoardMainIcon"
+import {useBoardContext} from "@/app/board/[board]/useBoardContext"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {faGear, faArrowsSpin, faExclamationCircle} from "@fortawesome/free-solid-svg-icons"
+
+
+export function BoardMain() {
+	const {websocketState} = useBoardContext()
+
+	switch(websocketState) {
+		case undefined:
+			return <BoardMainIcon icon={<FontAwesomeIcon icon={faGear} spin/>} text={"Caricamento..."}/>
+		case WebSocket.CONNECTING:
+			return <BoardMainIcon icon={<FontAwesomeIcon icon={faArrowsSpin} spin/>} text={"Connessione..."}/>
+		case WebSocket.OPEN:
+			return <BoardMainTaskGroups/>
+		case WebSocket.CLOSING:
+		case WebSocket.CLOSED:
+			return <BoardMainIcon icon={<FontAwesomeIcon icon={faExclamationCircle}/>} text={"Errore"} className={"red"}/>
+	}
+}
diff --git a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
index db9ac16..0c386c6 100644
--- a/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
+++ b/todoblue/src/app/board/[board]/BoardMainTaskGroups.tsx
@@ -6,8 +6,8 @@ export function BoardMainTaskGroups() {
 	const {taskGroups} = useBoardContext()
 
 	return (
-		<div className={"chapter-5"}>
+		<main className={"chapter-5"}>
 			{taskGroups.map((tg) => <TaskGroupColumn taskGroup={tg}/>)}
-		</div>
+		</main>
 	)
 }