mirror of
https://github.com/wgh136/nysoure.git
synced 2025-09-27 20:27:23 +00:00
format
This commit is contained in:
@@ -1,4 +1,9 @@
|
||||
import { MdMenu, MdOutlineBadge, MdOutlinePerson, MdOutlineStorage } from "react-icons/md";
|
||||
import {
|
||||
MdMenu,
|
||||
MdOutlineBadge,
|
||||
MdOutlinePerson,
|
||||
MdOutlineStorage,
|
||||
} from "react-icons/md";
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import StorageView from "./manage_storage_page.tsx";
|
||||
import UserView from "./manage_user_page.tsx";
|
||||
@@ -26,70 +31,89 @@ export default function ManagePage() {
|
||||
|
||||
useEffect(() => {
|
||||
document.title = t("Manage");
|
||||
}, [])
|
||||
}, []);
|
||||
|
||||
const buildItem = (title: string, icon: ReactNode, p: number) => {
|
||||
return <li key={title} onClick={() => {
|
||||
setPage(p);
|
||||
const checkbox = document.getElementById("my-drawer-2") as HTMLInputElement;
|
||||
if (checkbox) {
|
||||
checkbox.checked = false;
|
||||
}
|
||||
}} className={"my-1"}>
|
||||
<a className={`flex items-center h-9 px-4 ${page == p && "bg-primary text-primary-content"}`}>
|
||||
{icon}
|
||||
<span className={"text"}>
|
||||
{title}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
return (
|
||||
<li
|
||||
key={title}
|
||||
onClick={() => {
|
||||
setPage(p);
|
||||
const checkbox = document.getElementById(
|
||||
"my-drawer-2",
|
||||
) as HTMLInputElement;
|
||||
if (checkbox) {
|
||||
checkbox.checked = false;
|
||||
}
|
||||
}}
|
||||
className={"my-1"}
|
||||
>
|
||||
<a
|
||||
className={`flex items-center h-9 px-4 ${page == p && "bg-primary text-primary-content"}`}
|
||||
>
|
||||
{icon}
|
||||
<span className={"text"}>{title}</span>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const pageNames = [
|
||||
t("My Info"),
|
||||
t("Storage"),
|
||||
t("Users"),
|
||||
t("Server"),
|
||||
]
|
||||
const pageNames = [t("My Info"), t("Storage"), t("Users"), t("Server")];
|
||||
|
||||
const pageComponents = [
|
||||
<ManageMePage />,
|
||||
<StorageView />,
|
||||
<UserView />,
|
||||
<ManageServerConfigPage />,
|
||||
]
|
||||
];
|
||||
|
||||
return <div className="drawer lg:drawer-open">
|
||||
<input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
|
||||
<div className="drawer-content" style={{
|
||||
height: "calc(100vh - 64px)",
|
||||
}}>
|
||||
<div className={"flex w-full h-14 items-center gap-2 px-3"}>
|
||||
<label className={"btn btn-square btn-ghost lg:hidden"} htmlFor="my-drawer-2">
|
||||
<MdMenu size={24} />
|
||||
</label>
|
||||
<h1 className={"text-xl font-bold"}>
|
||||
{pageNames[page]}
|
||||
</h1>
|
||||
return (
|
||||
<div className="drawer lg:drawer-open">
|
||||
<input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
|
||||
<div
|
||||
className="drawer-content"
|
||||
style={{
|
||||
height: "calc(100vh - 64px)",
|
||||
}}
|
||||
>
|
||||
<div className={"flex w-full h-14 items-center gap-2 px-3"}>
|
||||
<label
|
||||
className={"btn btn-square btn-ghost lg:hidden"}
|
||||
htmlFor="my-drawer-2"
|
||||
>
|
||||
<MdMenu size={24} />
|
||||
</label>
|
||||
<h1 className={"text-xl font-bold"}>{pageNames[page]}</h1>
|
||||
</div>
|
||||
<div>{pageComponents[page]}</div>
|
||||
</div>
|
||||
<div>
|
||||
{pageComponents[page]}
|
||||
<div
|
||||
className="drawer-side"
|
||||
style={{
|
||||
height: lg ? "calc(100vh - 64px)" : "100vh",
|
||||
}}
|
||||
>
|
||||
<label
|
||||
htmlFor="my-drawer-2"
|
||||
aria-label="close sidebar"
|
||||
className="drawer-overlay"
|
||||
></label>
|
||||
<ul className="menu bg-base-100 min-h-full lg:min-h-0 w-72 px-4 lg:mt-1">
|
||||
<h2 className={"text-lg font-bold p-4"}>{t("Manage")}</h2>
|
||||
{buildItem(t("My Info"), <MdOutlineBadge className={"text-xl"} />, 0)}
|
||||
{buildItem(
|
||||
t("Storage"),
|
||||
<MdOutlineStorage className={"text-xl"} />,
|
||||
1,
|
||||
)}
|
||||
{buildItem(t("Users"), <MdOutlinePerson className={"text-xl"} />, 2)}
|
||||
{buildItem(
|
||||
t("Server"),
|
||||
<MdOutlineStorage className={"text-xl"} />,
|
||||
3,
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="drawer-side" style={{
|
||||
height: lg ? "calc(100vh - 64px)" : "100vh",
|
||||
}}>
|
||||
<label htmlFor="my-drawer-2" aria-label="close sidebar" className="drawer-overlay"></label>
|
||||
<ul className="menu bg-base-100 min-h-full lg:min-h-0 w-72 px-4 lg:mt-1">
|
||||
<h2 className={"text-lg font-bold p-4"}>
|
||||
{t("Manage")}
|
||||
</h2>
|
||||
{buildItem(t("My Info"), <MdOutlineBadge className={"text-xl"} />, 0)}
|
||||
{buildItem(t("Storage"), <MdOutlineStorage className={"text-xl"} />, 1)}
|
||||
{buildItem(t("Users"), <MdOutlinePerson className={"text-xl"} />, 2)}
|
||||
{buildItem(t("Server"), <MdOutlineStorage className={"text-xl"} />, 3)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user