Kieran
/
snort
5
14
Fork 14
Code Issues 53 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

split Menu

This commit is contained in:
Martti Malmi 2024-02-28 12:53:35 +02:00
parent a9c7edb09d
commit 8fef783cf8
4 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/app/src/Pages/settings/Menu.tsx → packages/app/src/Pages/settings/Menu/Menu.tsx
View File

@ -1,12 +1,10 @@
import classNames from "classnames";
import { ReactNode, useCallback } from "react";
import { FormattedMessage } from "react-intl";
import { Link, useNavigate } from "react-router-dom";
import Icon from "@/Components/Icons/Icon";
import {ReactNode, useCallback} from "react";
import {FormattedMessage} from "react-intl";
import {useNavigate} from "react-router-dom";
import useLogin from "@/Hooks/useLogin";
import { LoginStore, logout } from "@/Utils/Login";
import { getCurrentSubscription } from "@/Utils/Subscription";
import {LoginStore, logout} from "@/Utils/Login";
import {getCurrentSubscription} from "@/Utils/Subscription";
import {SettingsMenuComponent} from "@/Pages/settings/Menu/SettingsMenuComponent";
export type SettingsMenuItems = Array<{
title: ReactNode;
@ -175,35 +173,4 @@ const SettingsIndex = () => {
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;

35
packages/app/src/Pages/settings/Menu/SettingsMenuComponent.tsx Normal file
View File

@ -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>
);
}

2
packages/app/src/Pages/settings/Routes.tsx
View File

@ -4,7 +4,7 @@ import AccountsPage from "@/Pages/settings/Accounts";
import { CacheSettings } from "@/Pages/settings/Cache";
import { ManageHandleRoutes } from "@/Pages/settings/handle";
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 Notifications from "@/Pages/settings/Notifications";
import Preferences from "@/Pages/settings/Preferences";

3
packages/app/src/Pages/settings/tools/index.tsx
View File

@ -1,9 +1,10 @@
import { FormattedMessage } from "react-intl";
import { Outlet, RouteObject } from "react-router-dom";
import { SettingsMenuComponent, SettingsMenuItems } from "../Menu";
import { SettingsMenuItems } from "../Menu/Menu";
import { FollowsRelayHealth } from "./follows-relay-health";
import { PruneFollowList } from "./prune-follows";
import {SettingsMenuComponent} from "@/Pages/settings/Menu/SettingsMenuComponent";
const ToolMenuItems = [
{