59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import { toast } from "sonner";
|
|
import { Search } from "./Search";
|
|
|
|
export function Layout({ children }: { children?: React.ReactNode }) {
|
|
return (
|
|
<div className="w-screen min-h-screen relative left-0 top-0 flex justify-center">
|
|
<main className="w-full max-sm:mx-3 pt-14 sm:w-xl xl:w-2xl 2xl:w-3xl mb-20">
|
|
<div className="flex items-center justify-between">
|
|
<a href="/">
|
|
<h1 className="text-3xl mb-5">中V档案馆</h1>
|
|
</a>
|
|
<div className="h-8">
|
|
<LoginOrLogout />
|
|
</div>
|
|
</div>
|
|
<Search />
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const LoginOrLogout = () => {
|
|
const session = localStorage.getItem("sessionID");
|
|
if (session) {
|
|
return (
|
|
<span
|
|
onClick={() => {
|
|
localStorage.removeItem("sessionID");
|
|
toast.success("已退出登录");
|
|
}}
|
|
>
|
|
退出登录
|
|
</span>
|
|
);
|
|
} else {
|
|
return <a href="/login">登录</a>;
|
|
}
|
|
};
|
|
|
|
export function LayoutWithoutSearch({ children }: { children?: React.ReactNode }) {
|
|
return (
|
|
<div className="w-screen min-h-screen relative left-0 top-0 flex justify-center">
|
|
<main className="w-full max-sm:mx-3 pt-14 sm:w-xl xl:w-2xl 2xl:w-3xl mb-20">
|
|
<div className="flex items-center justify-between">
|
|
<a href="/">
|
|
<h1 className="text-3xl mb-5">中V档案馆</h1>
|
|
</a>
|
|
<div className="h-8">
|
|
<LoginOrLogout />
|
|
</div>
|
|
</div>
|
|
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|