File size: 2,943 Bytes
6e38ce1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import * as React from "react";
import { appContext } from "../hooks/provider";
import { useConfigStore } from "../hooks/store";
import "antd/dist/reset.css";
import { ConfigProvider, theme } from "antd";
import { SessionManager } from "./views/manager";
const classNames = (...classes: (string | undefined | boolean)[]) => {
return classes.filter(Boolean).join(" ");
};
type Props = {
title: string;
link: string;
children?: React.ReactNode;
showHeader?: boolean;
restricted?: boolean;
meta?: any;
activeTab?: string;
onTabChange?: (tab: string) => void;
};
const MagenticUILayout = ({
meta,
title,
link,
showHeader = true,
restricted = false,
activeTab,
onTabChange,
}: Props) => {
const { darkMode, user, setUser } = React.useContext(appContext);
const { sidebar } = useConfigStore();
const { isExpanded } = sidebar;
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
// Mimic sign-in: if no user or user.email, set default user and localStorage
React.useEffect(() => {
if (!user?.email) {
const defaultEmail = "default";
setUser({ ...user, email: defaultEmail, name: defaultEmail });
if (typeof window !== "undefined") {
window.localStorage.setItem("user_email", defaultEmail);
}
}
}, [user, setUser]);
// Close mobile menu on route change
React.useEffect(() => {
setIsMobileMenuOpen(false);
}, [link]);
React.useEffect(() => {
document.getElementsByTagName("html")[0].className = `${
darkMode === "dark" ? "dark bg-primary" : "light bg-primary"
}`;
}, [darkMode]);
const layoutContent = (
<div className="h-screen flex">
{/* Content area */}
<div
className={classNames(
"flex-1 flex flex-col min-h-screen",
"transition-all duration-300 ease-in-out",
"md:pl-1",
isExpanded ? "md:pl-1" : "md:pl-1"
)}
>
<ConfigProvider
theme={{
token: {
borderRadius: 4,
colorBgBase: darkMode === "dark" ? "#2a2a2a" : "#ffffff",
},
algorithm:
darkMode === "dark"
? theme.darkAlgorithm
: theme.defaultAlgorithm,
}}
>
<main className="flex-1 p-1 text-primary" style={{ height: "100%" }}>
<SessionManager />
</main>
</ConfigProvider>
<div className="text-sm text-primary mt-2 mb-2 text-center">
Magentic-UI can make mistakes. Please monitor its work and intervene if
necessary.
</div>
</div>
</div>
);
if (restricted) {
return (
<appContext.Consumer>
{(context: any) => {
if (context.user) {
return layoutContent;
}
return null;
}}
</appContext.Consumer>
);
}
return layoutContent;
};
export default MagenticUILayout;
|