feat: navbar and footer

src/components/layout/AppShellWrappers/AppShellFooterWrapper.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { AppShell } from "@mantine/core";
+
+type Props = {
+    children: ReactNode;
+};
+
+const AppShellFooterWrapper: FC<Props> = ({ children }) => {
+    return <AppShell.Footer hiddenFrom={"sm"}>{children}</AppShell.Footer>;
+};
+
+export default AppShellFooterWrapper;

src/components/layout/AppShellWrappers/AppShellMainWrapper.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { AppShell } from "@mantine/core";
+
+type Props = {
+    children: ReactNode;
+};
+
+const AppShellMainWrapper: FC<Props> = ({ children }) => {
+    return <AppShell.Main>{children}</AppShell.Main>;
+};
+
+export default AppShellMainWrapper;

src/components/layout/AppShellWrappers/AppShellNavbarWrapper.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { AppShell } from "@mantine/core";
+
+type Props = {
+    children: ReactNode;
+};
+
+const AppShellNavbarWrapper: FC<Props> = ({ children }) => {
+    return <AppShell.Navbar>{children}</AppShell.Navbar>;
+};
+
+export default AppShellNavbarWrapper;