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

Update UserMenu to use Chakra components and include score

Browse Source
This commit is contained in:
rsandb
2023-01-13 20:34:52 -06:00
parent af8f17a55c
commit 05f3ce5d20
1 changed files with 36 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Header/UserMenu.tsx
+36 -88
View File
@@ -1,16 +1,10 @@
import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react"; import { Avatar, Box, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Text } from "@chakra-ui/react";
import { Popover } from "@headlessui/react";
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
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 from "react";
import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi"; import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
export function UserMenu() { export function UserMenu() {
const { data: session } = useSession(); const { data: session } = useSession();
const backgroundColor = useColorModeValue("white", "gray.700");
const accentColor = useColorModeValue("gray.300", "gray.600");
if (!session) { if (!session) {
return <></>; return <></>;
@@ -47,87 +41,41 @@ export function UserMenu() {
} }
return ( return (
<Popover className="relative"> <>
{({ open }) => ( <Menu>
<> <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor="blackAlpha.300">
<Popover.Button aria-label="Toggle Account Options" className="flex"> <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
<Box <Avatar size="sm" bgImage={session.user.image}></Avatar>
borderWidth="1px" <p data-cy="username" className="hidden lg:flex">
borderColor={accentColor} {session.user.name || session.user.email}
className="flex items-center gap-4 p-1 lg:pr-6 rounded-full transition-colors duration-300" </p>
> </Box>
<Image </MenuButton>
src={session.user.image || "/images/temp-avatars/av1.jpg"} <MenuList p="2" borderRadius="xl">
alt="Profile Picture" <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
width="36" <Text>Your Score</Text>
height="36" <Text color="blue.500" fontWeight="bold" fontSize="xl">
className="rounded-full" 3,200
></Image> </Text>
<p data-cy="username" className="hidden lg:flex"> </Box>
{session.user.name || session.user.email} <MenuDivider></MenuDivider>
</p> {accountOptions.map((item) => (
</Box> <Link key={item.name} href={item.href} _hover={{ textDecoration: "none" }}>
</Popover.Button> <MenuItem gap="3" borderRadius="md" p="4">
<AnimatePresence initial={false}> <item.icon className="text-blue-500" aria-hidden="true" />
{open && ( <Text>{item.name}</Text>
<Box backgroundColor={backgroundColor}> </MenuItem>
<Popover.Panel </Link>
static ))}
as={motion.div}
initial={{ opacity: 0, y: -10 }} <MenuDivider></MenuDivider>
animate={{ opacity: 1, y: 0 }} <MenuItem gap="3" borderRadius="md" p="4" onClick={() => signOut({ callbackUrl: "/" })}>
exit={{ <FiLogOut className="text-blue-500" aria-hidden="true" />
opacity: 0, <Text>Sign Out</Text>
y: -10, </MenuItem>
transition: { duration: 0.2 }, </MenuList>
}} </Menu>
> </>
<Box
bg={backgroundColor}
borderRadius="xl"
shadow="base"
className="absolute right-0 mt-3 w-screen max-w-xs p-4"
>
<Box className="flex flex-col gap-1">
{accountOptions.map((item) => (
<Link
as={NextLink}
key={item.name}
href={item.href}
aria-label={item.desc}
className="flex items-center"
bg={backgroundColor}
_hover={{ textDecoration: "none" }}
>
<div className="p-4">
<item.icon className="text-blue-500" aria-hidden="true" />
</div>
<div>
<Text>{item.name}</Text>
</div>
</Link>
))}
<Link
className="flex items-center rounded-md cursor-pointer"
_hover={{ textDecoration: "none" }}
onClick={() => signOut({ callbackUrl: "/" })}
>
<div className="p-4">
<FiLogOut className="text-blue-500" />
</div>
<div>
<Text>Sign Out</Text>
</div>
</Link>
</Box>
</Box>
</Popover.Panel>
</Box>
)}
</AnimatePresence>
</>
)}
</Popover>
); );
} }
} }