Feat: moved admin panel to layout

src/app/admin/layout.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { ActionIcon, AppShell, Burger, Flex, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { LuMoon, LuSun } from "react-icons/lu";
+
+const AdminLayout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  const [opened, { toggle }] = useDisclosure();
+  const { setColorScheme, colorScheme } = useMantineColorScheme();
+  const changeColorScheme = () => {
+    setColorScheme(colorScheme === "light" ? "dark" : "light");
+  };
+  return (
+    <AppShell header={{ height: 60 }} navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}>
+      <AppShell.Header>
+        <Flex h="100%" px="md" justify="space-between" align="center">
+          <Group h="100%">
+            <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
+            <div>Logo</div>
+          </Group>
+          <ActionIcon onClick={changeColorScheme} variant="default" size="md" aria-label="Toggle color scheme">
+            {colorScheme === "light" ? <LuMoon /> : <LuSun />}
+          </ActionIcon>
+        </Flex>
+      </AppShell.Header>
+      <AppShell.Navbar p="md">
+        {Array(15)
+          .fill(0)
+          .map((_, index) => (
+            <Skeleton key={index} h={28} mt="sm" animate={false} />
+          ))}
+      </AppShell.Navbar>
+      <AppShell.Main>{children}</AppShell.Main>
+    </AppShell>
+  );
+};
+
+export default AdminLayout;

src/app/admin/panel/page.tsx

@@ -1,35 +1,6 @@
 "use client";
-import { ActionIcon, AppShell, Burger, Flex, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { LuMoon, LuSun } from "react-icons/lu";
 
 const PanelPage = () => {
-  const [opened, { toggle }] = useDisclosure();
+  return <div>Panel</div>;
-  const { setColorScheme, colorScheme } = useMantineColorScheme();
-  const changeColorScheme = () => {
-    setColorScheme(colorScheme === "light" ? "dark" : "light");
-  };
-  return (
-    <AppShell header={{ height: 60 }} navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}>
-      <AppShell.Header>
-        <Flex h="100%" px="md" justify="space-between" align="center">
-          <Group h="100%">
-            <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
-            <div>Logo</div>
-          </Group>
-          <ActionIcon onClick={changeColorScheme} variant="default" size="md" aria-label="Toggle color scheme">
-            {colorScheme === "light" ? <LuMoon /> : <LuSun />}
-          </ActionIcon>
-        </Flex>
-      </AppShell.Header>
-      <AppShell.Navbar p="md">
-        {Array(15)
-          .fill(0)
-          .map((_, index) => (
-            <Skeleton key={index} h={28} mt="sm" animate={false} />
-          ))}
-      </AppShell.Navbar>
-    </AppShell>
-  );
 };
 export default PanelPage;