wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-08-12 11:40:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

use NextLink for UserMenu option and cleanup

Browse Source
This commit is contained in:
notmd
2023-01-15 17:23:46 +07:00
parent 8b8326e22f
commit c01a4fa345
1 changed files with 90 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Header/UserMenu.tsx
+90 -86
View File
@@ -11,101 +11,105 @@ import {
Text, Text,
useColorModeValue, useColorModeValue,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import NextLink from "next/link";
import { signOut, useSession } from "next-auth/react"; import { signOut, useSession } from "next-auth/react";
import React from "react"; import React, { ElementType, useCallback } from "react";
import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi"; import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
interface MenuOption {
name: string;
href: string;
desc: string;
icon: ElementType;
isExternal: boolean;
}
export function UserMenu() { export function UserMenu() {
const borderColor = useColorModeValue("gray.300", "gray.600"); const borderColor = useColorModeValue("gray.300", "gray.600");
const handleSignOut = useCallback(() => {
signOut({ callbackUrl: "/" });
}, []);
const { data: session, status } = useSession();
const { data: session } = useSession(); if (!session || status !== "authenticated") {
return null;
if (!session) {
return <></>;
} }
if (session && session.user) { const options: MenuOption[] = [
const accountOptions = [ {
{ name: "Dashboard",
name: "Dashboard", href: "/dashboard",
href: "/dashboard", desc: "Dashboard",
desc: "Dashboard", icon: FiLayout,
icon: FiLayout, isExternal: false,
}, },
{ {
name: "Account Settings", name: "Account Settings",
href: "/account", href: "/account",
desc: "Account Settings", desc: "Account Settings",
icon: FiSettings, icon: FiSettings,
}, isExternal: false,
]; },
const helpOptions = [ {
{ name: "Report a Bug",
name: "Report a Bug", href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose", desc: "Report a Bug",
desc: "Report a Bug", icon: FiAlertTriangle,
icon: FiAlertTriangle, isExternal: true,
}, },
]; ];
if (session.user.role === "admin") { if (session.user.role === "admin") {
accountOptions.unshift({ options.unshift({
name: "Admin Dashboard", name: "Admin Dashboard",
href: "/admin", href: "/admin",
desc: "Admin Dashboard", desc: "Admin Dashboard",
icon: FiShield, icon: FiShield,
}); isExternal: false,
} });
return (
<>
<Menu>
<MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
<Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
<Avatar size="sm" bgImage={session.user.image}></Avatar>
<Text data-cy="username" className="hidden lg:flex">
{session.user.name || session.user.email}
</Text>
</Box>
</MenuButton>
<MenuList p="2" borderRadius="xl" shadow="none">
<Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
<Text>{session.user.name}</Text>
<Text color="blue.500" fontWeight="bold" fontSize="xl">
3,200
</Text>
</Box>
<MenuDivider />
<MenuGroup>
{accountOptions.map((item) => (
<Link key={item.name} href={item.href} _hover={{ textDecoration: "none" }}>
<MenuItem gap="3" borderRadius="md" p="4">
<item.icon className="text-blue-500" aria-hidden="true" />
<Text>{item.name}</Text>
</MenuItem>
</Link>
))}
</MenuGroup>
<MenuDivider />
<MenuGroup>
{helpOptions.map((item) => (
<Link key={item.name} href={item.href} isExternal _hover={{ textDecoration: "none" }}>
<MenuItem gap="3" borderRadius="md" p="4">
<item.icon className="text-blue-500" aria-hidden="true" />
<Text>{item.name}</Text>
</MenuItem>
</Link>
))}
</MenuGroup>
<MenuDivider />
<MenuItem gap="3" borderRadius="md" p="4" onClick={() => signOut({ callbackUrl: "/" })}>
<FiLogOut className="text-blue-500" aria-hidden="true" />
<Text>Sign Out</Text>
</MenuItem>
</MenuList>
</Menu>
</>
);
} }
return (
<Menu>
<MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
<Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
<Avatar size="sm" bgImage={session.user.image}></Avatar>
<Text data-cy="username" className="hidden lg:flex">
{session.user.name || session.user.email}
</Text>
</Box>
</MenuButton>
<MenuList p="2" borderRadius="xl" shadow="none">
<Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
<Text>{session.user.name}</Text>
<Text color="blue.500" fontWeight="bold" fontSize="xl">
3,200
</Text>
</Box>
<MenuDivider />
<MenuGroup>
{options.map((item) => (
<Link
key={item.name}
as={item.isExternal ? "a" : NextLink}
isExternal={item.isExternal}
href={item.href}
_hover={{ textDecoration: "none" }}
>
<MenuItem gap="3" borderRadius="md" p="4">
<item.icon className="text-blue-500" aria-hidden="true" />
<Text>{item.name}</Text>
</MenuItem>
</Link>
))}
</MenuGroup>
<MenuDivider />
<MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
<FiLogOut className="text-blue-500" aria-hidden="true" />
<Text>Sign Out</Text>
</MenuItem>
</MenuList>
</Menu>
);
} }
export default UserMenu; export default UserMenu;