forked from Kieran/snort
split Menu
This commit is contained in:
parent
a9c7edb09d
commit
8fef783cf8
@ -1,12 +1,10 @@
|
|||||||
import classNames from "classnames";
|
|
||||||
import {ReactNode, useCallback} from "react";
|
import {ReactNode, useCallback} from "react";
|
||||||
import {FormattedMessage} from "react-intl";
|
import {FormattedMessage} from "react-intl";
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
import {useNavigate} from "react-router-dom";
|
||||||
|
|
||||||
import Icon from "@/Components/Icons/Icon";
|
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import {LoginStore, logout} from "@/Utils/Login";
|
import {LoginStore, logout} from "@/Utils/Login";
|
||||||
import {getCurrentSubscription} from "@/Utils/Subscription";
|
import {getCurrentSubscription} from "@/Utils/Subscription";
|
||||||
|
import {SettingsMenuComponent} from "@/Pages/settings/Menu/SettingsMenuComponent";
|
||||||
|
|
||||||
export type SettingsMenuItems = Array<{
|
export type SettingsMenuItems = Array<{
|
||||||
title: ReactNode;
|
title: ReactNode;
|
||||||
@ -175,35 +173,4 @@ const SettingsIndex = () => {
|
|||||||
return <SettingsMenuComponent menu={settingsGroups} />;
|
return <SettingsMenuComponent menu={settingsGroups} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function SettingsMenuComponent({ menu }: { menu: SettingsMenuItems }) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
{menu.map((group, groupIndex) => (
|
|
||||||
<div key={groupIndex} className="mb-4">
|
|
||||||
<div className="p-2 font-bold uppercase text-secondary text-xs tracking-wide">{group.title}</div>
|
|
||||||
{group.items.map(({ icon, iconBg, message, path, action }, index) => (
|
|
||||||
<Link
|
|
||||||
to={path || "#"}
|
|
||||||
onClick={action}
|
|
||||||
key={path || index}
|
|
||||||
className={classNames("px-2.5 py-1.5 flex justify-between items-center border border-border-color", {
|
|
||||||
"rounded-t-xl": index === 0,
|
|
||||||
"rounded-b-xl": index === group.items.length - 1,
|
|
||||||
"border-t-0": index !== 0,
|
|
||||||
})}>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className={`p-1 ${iconBg} rounded-lg flex justify-center items-center text-white`}>
|
|
||||||
<Icon name={icon} size={18} className="relative" />
|
|
||||||
</div>
|
|
||||||
<span className="text-base font-semibold flex-grow">{message}</span>
|
|
||||||
</div>
|
|
||||||
<Icon name="arrowFront" size={12} className="text-secondary" />
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SettingsIndex;
|
export default SettingsIndex;
|
@ -0,0 +1,35 @@
|
|||||||
|
import {Link} from "react-router-dom";
|
||||||
|
import classNames from "classnames";
|
||||||
|
import Icon from "@/Components/Icons/Icon";
|
||||||
|
import {SettingsMenuItems} from "@/Pages/settings/Menu/Menu";
|
||||||
|
|
||||||
|
export function SettingsMenuComponent({menu}: { menu: SettingsMenuItems }) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{menu.map((group, groupIndex) => (
|
||||||
|
<div key={groupIndex} className="mb-4">
|
||||||
|
<div className="p-2 font-bold uppercase text-secondary text-xs tracking-wide">{group.title}</div>
|
||||||
|
{group.items.map(({icon, iconBg, message, path, action}, index) => (
|
||||||
|
<Link
|
||||||
|
to={path || "#"}
|
||||||
|
onClick={action}
|
||||||
|
key={path || index}
|
||||||
|
className={classNames("px-2.5 py-1.5 flex justify-between items-center border border-border-color", {
|
||||||
|
"rounded-t-xl": index === 0,
|
||||||
|
"rounded-b-xl": index === group.items.length - 1,
|
||||||
|
"border-t-0": index !== 0,
|
||||||
|
})}>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`p-1 ${iconBg} rounded-lg flex justify-center items-center text-white`}>
|
||||||
|
<Icon name={icon} size={18} className="relative"/>
|
||||||
|
</div>
|
||||||
|
<span className="text-base font-semibold flex-grow">{message}</span>
|
||||||
|
</div>
|
||||||
|
<Icon name="arrowFront" size={12} className="text-secondary"/>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -4,7 +4,7 @@ import AccountsPage from "@/Pages/settings/Accounts";
|
|||||||
import { CacheSettings } from "@/Pages/settings/Cache";
|
import { CacheSettings } from "@/Pages/settings/Cache";
|
||||||
import { ManageHandleRoutes } from "@/Pages/settings/handle";
|
import { ManageHandleRoutes } from "@/Pages/settings/handle";
|
||||||
import ExportKeys from "@/Pages/settings/Keys";
|
import ExportKeys from "@/Pages/settings/Keys";
|
||||||
import Menu from "@/Pages/settings/Menu";
|
import Menu from "@/Pages/settings/Menu/Menu";
|
||||||
import ModerationSettings from "@/Pages/settings/Moderation";
|
import ModerationSettings from "@/Pages/settings/Moderation";
|
||||||
import Notifications from "@/Pages/settings/Notifications";
|
import Notifications from "@/Pages/settings/Notifications";
|
||||||
import Preferences from "@/Pages/settings/Preferences";
|
import Preferences from "@/Pages/settings/Preferences";
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { Outlet, RouteObject } from "react-router-dom";
|
import { Outlet, RouteObject } from "react-router-dom";
|
||||||
|
|
||||||
import { SettingsMenuComponent, SettingsMenuItems } from "../Menu";
|
import { SettingsMenuItems } from "../Menu/Menu";
|
||||||
import { FollowsRelayHealth } from "./follows-relay-health";
|
import { FollowsRelayHealth } from "./follows-relay-health";
|
||||||
import { PruneFollowList } from "./prune-follows";
|
import { PruneFollowList } from "./prune-follows";
|
||||||
|
import {SettingsMenuComponent} from "@/Pages/settings/Menu/SettingsMenuComponent";
|
||||||
|
|
||||||
const ToolMenuItems = [
|
const ToolMenuItems = [
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user