feat: update admin pages to display "Hello world!" and enhance layout with dynamic titles and dividers

src/app/admin/classes/page.tsx

@@ -5,5 +5,5 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Classes</p>;
+	return <p>Hello world!</p>;
 }

src/app/admin/layout.tsx

@@ -1,10 +1,15 @@
+"use client";
 import { Sidebar } from "@/app/components/Sidebar";
+import { Divider } from "@nextui-org/react";
+import { usePathname } from "next/navigation";
 import { FaDoorClosed, FaRegUser } from "react-icons/fa";
 import { FiSettings } from "react-icons/fi";
 import { IoMdStats } from "react-icons/io";
 import { MdInbox } from "react-icons/md";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+	const pathName = usePathname();
+
 	const sidebarItems = [
 		[
 			{ href: "/admin", title: "Dashboard", icon: <IoMdStats /> },
@@ -18,7 +23,19 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 	return (
 		<div className="flex">
 			<Sidebar items={sidebarItems} />
-			<main>{children}</main>
+			<main className="p-7 w-full">
+				<h1 className="text-2xl font-semibold">
+					{
+						sidebarItems
+							.flat()
+							.find((item) => item.href === pathName)?.title
+					}
+				</h1>
+
+				<Divider className="mt-2 mb-5 bg-foreground-300" />
+
+				{children}
+			</main>
 		</div>
 	);
 }

src/app/admin/page.tsx

@@ -5,5 +5,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Admin Home</p>;
+	return (
+		<p>Hello world!</p>
+	);
 }

src/app/admin/rooms/page.tsx

@@ -5,5 +5,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Rooms</p>;
+	return (
+		<p>Hello world!</p>
+	);
 }

src/app/admin/settings/page.tsx

@@ -5,5 +5,7 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Settings</p>;
+	return (
+		<p>Hello world!</p>
+	);
 }

src/app/admin/users/page.tsx

@@ -6,9 +6,5 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return (
-		<div className="p-4">
-			<UserList />
-		</div>
-	);
+	return <UserList />;
 }