mirror of
https://github.com/wassname/Open-Assistant.git
synced 2026-06-29 16:30:24 +08:00
Dashboard
This commit is contained in:
rsandb
@@ -1,45 +1,11 @@
|
||||
import { Box, Button, useColorMode } from "@chakra-ui/react";
|
||||
import { Popover } from "@headlessui/react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Box, Button, Text, useColorMode } from "@chakra-ui/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
|
||||
import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
|
||||
import { UserMenu } from "./UserMenu";
|
||||
|
||||
function MenuIcon(props) {
|
||||
const { colorMode } = useColorMode();
|
||||
const stroke = colorMode === "light" ? "black" : "white";
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||
<path d="M5 6h14M5 18h14M5 12h14" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" stroke={stroke} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ChevronUpIcon(props) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||
<path d="M17 14l-5-5-5 5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileNavLink({ children, ...props }) {
|
||||
return (
|
||||
<Popover.Button
|
||||
as={Link}
|
||||
href={props.href}
|
||||
className="block text-base leading-7 tracking-tight text-gray-700"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Popover.Button>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountButton() {
|
||||
const { data: session } = useSession();
|
||||
if (session) {
|
||||
@@ -61,64 +27,20 @@ export function Header(props) {
|
||||
: colorMode === "light"
|
||||
? "border-b border-gray-400"
|
||||
: "border-b border-zinc-800";
|
||||
|
||||
return (
|
||||
<nav className={`oa-basic-theme ${borderClass}`}>
|
||||
<Box className="flex mx-auto max-w-7xl justify-between py-8 px-10">
|
||||
<div className="relative z-10 flex items-center gap-16">
|
||||
<Box className="relative z-10 flex justify-between px-4 py-4">
|
||||
<div className="relative z-10 flex items-center gap-10">
|
||||
<Link href="/" aria-label="Home" className="flex items-center">
|
||||
<Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
|
||||
<span className="text-2xl font-bold ml-3">Open Assistant</span>
|
||||
<Text fontFamily="inter" fontSize="2xl" fontWeight="bold" className="ml-3">
|
||||
Open Assistant
|
||||
</Text>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Popover className="lg:hidden">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className="relative z-10 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
|
||||
aria-label="Toggle site navigation"
|
||||
>
|
||||
{({ open }) => (open ? <ChevronUpIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />)}
|
||||
</Popover.Button>
|
||||
<AnimatePresence initial={false}>
|
||||
{open && (
|
||||
<>
|
||||
<Popover.Overlay
|
||||
static
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-1 bg-gray-300/60 backdrop-blur"
|
||||
/>
|
||||
<Popover.Panel
|
||||
static
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: -32 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
y: -32,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<MobileNavLink href="/#join-us">Join Us</MobileNavLink>
|
||||
<MobileNavLink href="/#faqs">FAQs</MobileNavLink>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-col gap-4"></div>
|
||||
</Popover.Panel>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<AccountButton />
|
||||
<UserMenu />
|
||||
<ColorModeIconToggle className="ml-5" />
|
||||
</div>
|
||||
</Box>
|
||||
</nav>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useColorMode } from "@chakra-ui/react";
|
||||
import { Text, useColorMode } from "@chakra-ui/react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { colors } from "styles/Theme/colors";
|
||||
|
||||
export function NavLinks(): JSX.Element {
|
||||
const [hoveredIndex, setHoveredIndex] = useState(null);
|
||||
@@ -14,8 +15,8 @@ export function NavLinks(): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{[
|
||||
["Join Us", "/#join-us"],
|
||||
["FAQ", "/#faq"],
|
||||
["Join Us", "/#join-us"],
|
||||
].map(([label, href], index) => (
|
||||
<Link
|
||||
key={label}
|
||||
@@ -38,7 +39,9 @@ export function NavLinks(): JSX.Element {
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<span className="relative z-10">{label}</span>
|
||||
<Text color={colorMode === "light" ? colors.light.text : colors.dark.text} className="relative z-10">
|
||||
{label}
|
||||
</Text>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import { Box, useColorModeValue } from "@chakra-ui/react";
|
||||
import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
|
||||
import { Popover } from "@headlessui/react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import React from "react";
|
||||
import { FaCog, FaSignOutAlt } from "react-icons/fa";
|
||||
import { FiLayout, FiLogOut } from "react-icons/fi";
|
||||
|
||||
export function UserMenu() {
|
||||
const { data: session } = useSession();
|
||||
const backgroundColor = useColorModeValue("#FFFFFF", "#000000");
|
||||
const backgroundColor = useColorModeValue("white", "gray.700");
|
||||
const accentColor = useColorModeValue("gray.300", "gray.600");
|
||||
|
||||
if (!session) {
|
||||
return <></>;
|
||||
@@ -16,10 +17,10 @@ export function UserMenu() {
|
||||
if (session && session.user) {
|
||||
const accountOptions = [
|
||||
{
|
||||
name: "Account Settings",
|
||||
href: "/account",
|
||||
desc: "Account Settings",
|
||||
icon: FaCog,
|
||||
name: "Dashboard",
|
||||
href: "/dashboard",
|
||||
desc: "Dashboard",
|
||||
icon: FiLayout,
|
||||
//For future use
|
||||
},
|
||||
];
|
||||
@@ -28,18 +29,22 @@ export function UserMenu() {
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button aria-label="Toggle Account Options" className="flex">
|
||||
<div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
|
||||
<Box
|
||||
borderWidth="1px"
|
||||
borderColor={accentColor}
|
||||
className="flex items-center gap-4 p-1 lg:pr-6 rounded-full transition-colors duration-300"
|
||||
>
|
||||
<Image
|
||||
src="/images/temp-avatars/av1.jpg"
|
||||
src="/images/temp-avatars/av5.jpg"
|
||||
alt="Profile Picture"
|
||||
width="40"
|
||||
height="40"
|
||||
width="36"
|
||||
height="36"
|
||||
className="rounded-full"
|
||||
></Image>
|
||||
<p data-cy="username" className="hidden lg:flex">
|
||||
{session.user.name || session.user.email}
|
||||
</p>
|
||||
</div>
|
||||
</Box>
|
||||
</Popover.Button>
|
||||
<AnimatePresence initial={false}>
|
||||
{open && (
|
||||
@@ -54,35 +59,45 @@ export function UserMenu() {
|
||||
y: -10,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
className="absolute right-0 mt-3 w-screen bg-inherit max-w-xs p-4 rounded-md border border-slate-300/70"
|
||||
>
|
||||
<Box className="flex flex-col gap-1">
|
||||
{accountOptions.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
aria-label={item.desc}
|
||||
className="flex items-center rounded-md hover:bg-gray-200/50"
|
||||
<Box
|
||||
bg={backgroundColor}
|
||||
borderWidth="1px"
|
||||
borderColor={accentColor}
|
||||
borderRadius="xl"
|
||||
className="absolute right-0 mt-3 w-screen max-w-xs p-4"
|
||||
>
|
||||
<Box className="flex flex-col gap-1">
|
||||
{accountOptions.map((item) => (
|
||||
<Link
|
||||
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 fontFamily="inter">{item.name}</Text>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
className="flex items-center rounded-md cursor-pointer"
|
||||
_hover={{ textDecoration: "none" }}
|
||||
onClick={() => signOut({ callbackUrl: "/" })}
|
||||
>
|
||||
<div className="p-4">
|
||||
<item.icon aria-hidden="true" />
|
||||
<FiLogOut className="text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p>{item.name}</p>
|
||||
<Text fontFamily="inter">Sign Out</Text>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => signOut({ callbackUrl: "/" })}
|
||||
>
|
||||
<div className="p-4">
|
||||
<FaSignOutAlt />
|
||||
</div>
|
||||
<div>
|
||||
<p>Sign Out</p>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</Popover.Panel>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user