From 184a5fd820dfd2ba6a55cd06ebf33642be8340c2 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Fri, 18 Oct 2024 14:33:08 +0100
Subject: [PATCH] Added the entity to the classroom

---
 src/pages/classrooms/[id].tsx | 64 +++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/pages/classrooms/[id].tsx b/src/pages/classrooms/[id].tsx
index 1ae4c83c..9a6e6f62 100644
--- a/src/pages/classrooms/[id].tsx
+++ b/src/pages/classrooms/[id].tsx
@@ -26,7 +26,7 @@ import Link from "next/link";
 import {useRouter} from "next/router";
 import {Divider} from "primereact/divider";
 import {useEffect, useMemo, useState} from "react";
-import {BsChevronLeft, BsClockFill, BsEnvelopeFill, BsFillPersonVcardFill, BsPlus, BsStopwatchFill, BsTag, BsTrash, BsX} from "react-icons/bs";
+import {BsBuilding, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsFillPersonVcardFill, BsPlus, BsStopwatchFill, BsTag, BsTrash, BsX} from "react-icons/bs";
 import {toast, ToastContainer} from "react-toastify";
 
 export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
@@ -185,38 +185,44 @@ export default function Home({user, group, users, entity}: Props) {
 			{user && (
 				<Layout user={user}>
 					<section className="flex flex-col gap-0">
-						<div className="flex flex-col gap-3">
-							<div className="flex items-end justify-between">
-								<div className="flex items-center gap-2">
-									<Link
-										href="/classrooms"
-										className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-										<BsChevronLeft />
-									</Link>
-									<h2 className="font-bold text-2xl">{group.name}</h2>
-								</div>
+						<div className="flex items-center justify-between">
+							<div className="flex flex-col gap-3">
+									<div className="flex items-center gap-2">
+										<Link
+											href="/classrooms"
+											className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+											<BsChevronLeft />
+										</Link>
+										<h2 className="font-bold text-2xl">{group.name}</h2>
+									</div>
+
+								{!isAdding && (
+									<div className="flex items-center gap-2">
+										<button
+											onClick={renameGroup}
+											disabled={isLoading || !canRenameClassroom}
+											className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+											<BsTag />
+											<span className="text-xs">Rename Group</span>
+										</button>
+										<button
+											onClick={deleteGroup}
+											disabled={isLoading || !canDeleteClassroom}
+											className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
+											<BsTrash />
+											<span className="text-xs">Delete Group</span>
+										</button>
+									</div>
+								)}
+							</div>
+							<div className="flex flex-col gap-2">
+							<span className="flex items-center gap-2">
+								<BsBuilding className="text-xl" /> {entity.label}
+							</span>
 								<span className="flex items-center gap-2">
 									<BsFillPersonVcardFill className="text-xl" /> {getUserName(group.admin)}
 								</span>
 							</div>
-							{!isAdding && (
-								<div className="flex items-center gap-2">
-									<button
-										onClick={renameGroup}
-										disabled={isLoading || !canRenameClassroom}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsTag />
-										<span className="text-xs">Rename Group</span>
-									</button>
-									<button
-										onClick={deleteGroup}
-										disabled={isLoading || !canDeleteClassroom}
-										className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsTrash />
-										<span className="text-xs">Delete Group</span>
-									</button>
-								</div>
-							)}
 						</div>
 						<Divider />
 						<div className="flex items-center justify-between mb-4">