-
- {/* logo */}
+
+
+
+
+ {({ open }) => (
+ <>
+
+
+
+ {open && (
+ <>
+
+
+
+ )}
+
+
+ )}
+
+ );
+ }
+}
+
+export default Avatar;
diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx
index 359496458f..2fd91c79ce 100644
--- a/website/src/components/CallToAction.tsx
+++ b/website/src/components/CallToAction.tsx
@@ -12,7 +12,7 @@ export function CallToAction() {
-
- {title}
- {subtitle &&{subtitle}
} -
+
diff --git a/website/src/components/Avatar.tsx b/website/src/components/Avatar.tsx
new file mode 100644
index 0000000000..26bdec0b0b
--- /dev/null
+++ b/website/src/components/Avatar.tsx
@@ -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 (
+
{children}
+
+ {email}
+ {/* Will be changed to username once it is implemented */} +
+ {accountOptions.map((item) => (
+
+
+
+
+
+
+
+
+ ))}
+ signOut()}
+ >
+ {item.name}
+
+
+
+
+
+ Sign Out
+Join Us
All open source projects begin with people like you. Open source is the belief that if we collaborate we can - together gift our knoweledge and technology to the world for the benefit of humanity. Are you in? Find us + together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us here:
@@ -27,7 +27,7 @@ export function CallToAction() {
d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
/>
- DISCORD
+ Discord
diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx
index e2cd7e1759..c47982a155 100644
--- a/website/src/components/Header.tsx
+++ b/website/src/components/Header.tsx
@@ -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 (
-
- );
+ return;
}
return (
-
-
+
+ }>
+ Log in
+
);
}
@@ -57,28 +57,22 @@ export function Header() {
return (