mirror of
https://github.com/wassname/Open-Assistant.git
synced 2026-06-30 16:40:05 +08:00
Quick format to the authenticated user page, updated header with user profile, styling updates
This commit is contained in:
rsandb
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
@@ -0,0 +1,96 @@
|
||||
import React from "react";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import Image from "next/image";
|
||||
import { Popover } from "@headlessui/react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
|
||||
|
||||
export function Avatar() {
|
||||
const { data: session } = useSession();
|
||||
|
||||
if (!session) {
|
||||
return <></>;
|
||||
}
|
||||
if (session && session.user) {
|
||||
const email = session.user.email;
|
||||
const accountOptions = [
|
||||
{
|
||||
name: "Account Settings",
|
||||
href: "#",
|
||||
desc: "Account Settings",
|
||||
icon: FaCog,
|
||||
//For future use
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button aria-label="Toggle Account Options" className="flex">
|
||||
<div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full bg-white border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
|
||||
<Image
|
||||
src="/images/temp-avatars/av1.jpg"
|
||||
alt="Profile Picture"
|
||||
width="40"
|
||||
height="40"
|
||||
className="rounded-full"
|
||||
></Image>
|
||||
<p className="hidden lg:flex">{email}</p>
|
||||
{/* Will be changed to username once it is implemented */}
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<AnimatePresence initial={false}>
|
||||
{open && (
|
||||
<>
|
||||
<Popover.Panel
|
||||
static
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
y: -10,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
className="absolute right-0 mt-3 w-screen max-w-xs p-4 rounded-md bg-white border border-slate-300/70"
|
||||
>
|
||||
<div 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"
|
||||
>
|
||||
<div className="p-4">
|
||||
<item.icon aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<p>{item.name}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => signOut()}
|
||||
>
|
||||
<div className="p-4">
|
||||
<FaSignOutAlt />
|
||||
</div>
|
||||
<div>
|
||||
<p>Sign Out</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Avatar;
|
||||
@@ -4,7 +4,9 @@ import { AnimatePresence, motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import { FaUser, FaSignOutAlt } from "react-icons/fa";
|
||||
|
||||
import { Avatar } from "./Avatar";
|
||||
import { Container } from "./Container";
|
||||
import { NavLinks } from "./NavLinks";
|
||||
|
||||
@@ -40,15 +42,13 @@ function MobileNavLink({ children, ...props }) {
|
||||
function AccountButton() {
|
||||
const { data: session } = useSession();
|
||||
if (session) {
|
||||
return (
|
||||
<Button variant="outline" onClick={() => signOut()}>
|
||||
Log out
|
||||
</Button>
|
||||
);
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<Link href="/auth/signup" aria-label="Home" className="flex items-center">
|
||||
<Button variant="outline">Log in</Button>
|
||||
<Button variant="outline" leftIcon={<FaUser />}>
|
||||
Log in
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -57,7 +57,7 @@ export function Header() {
|
||||
return (
|
||||
<header>
|
||||
<nav>
|
||||
<Container className="relative z-50 flex justify-between py-8">
|
||||
<Container className="relative bg-white z-10 flex justify-between py-8">
|
||||
<div className="relative z-10 flex items-center gap-16">
|
||||
<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" />
|
||||
@@ -67,12 +67,12 @@ export function Header() {
|
||||
<NavLinks />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Popover className="lg:hidden">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className="relative z-10 -m-2 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"
|
||||
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" />)}
|
||||
@@ -86,7 +86,7 @@ export function Header() {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur"
|
||||
className="fixed inset-0 z-1 bg-gray-300/60 backdrop-blur"
|
||||
/>
|
||||
<Popover.Panel
|
||||
static
|
||||
@@ -98,15 +98,13 @@ export function Header() {
|
||||
y: -32,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
|
||||
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">
|
||||
<AccountButton />
|
||||
</div>
|
||||
<div className="mt-8 flex flex-col gap-4"></div>
|
||||
</Popover.Panel>
|
||||
</>
|
||||
)}
|
||||
@@ -115,6 +113,7 @@ export function Header() {
|
||||
)}
|
||||
</Popover>
|
||||
<AccountButton />
|
||||
<Avatar />
|
||||
</div>
|
||||
</Container>
|
||||
</nav>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useSession } from "next-auth/react";
|
||||
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { Button, Input, Stack } from "@chakra-ui/react";
|
||||
|
||||
import { CallToAction } from "../components/CallToAction";
|
||||
import { Faq } from "../components/Faq";
|
||||
@@ -25,7 +26,7 @@ export default function Home() {
|
||||
/>
|
||||
</Head>
|
||||
<Header />
|
||||
<main>
|
||||
<main className="z-0">
|
||||
<Hero />
|
||||
<CallToAction />
|
||||
|
||||
@@ -45,12 +46,10 @@ export default function Home() {
|
||||
/>
|
||||
</Head>
|
||||
<Header />
|
||||
<main>
|
||||
<h2>Open Chat Gpt</h2>
|
||||
|
||||
<p>You are logged in</p>
|
||||
|
||||
<Link href="/grading/grade-output">~Rate a prompt and output now~</Link>
|
||||
<main className="h-3/4 z-0 bg-white flex items-center justify-center">
|
||||
<Button size="lg" colorScheme="blue" className="drop-shadow">
|
||||
<Link href="/grading/grade-output">Rate a prompt and output now</Link>
|
||||
</Button>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user