-
+
+
+
+
-
+
-
-
Open Assistant
-
Conversational AI for everyone.
+
+
Open Assistant
+
Conversational AI for everyone.
- {/*
*/}
+
-
-
+
+
);
}
diff --git a/website/src/components/Header/Header.stories.jsx b/website/src/components/Header/Header.stories.jsx
new file mode 100644
index 00000000..6c8bbb28
--- /dev/null
+++ b/website/src/components/Header/Header.stories.jsx
@@ -0,0 +1,24 @@
+import { SessionContext } from "next-auth/react";
+import React from "react";
+
+import { Header } from "./Header";
+
+export default {
+ title: "Header/Header",
+ component: Header,
+ parameters: {
+ layout: "fullscreen",
+ },
+};
+
+const Template = (args) => {
+ var { session } = args;
+ return (
+
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" } };
diff --git a/website/src/components/Header.tsx b/website/src/components/Header/Header.tsx
similarity index 95%
rename from website/src/components/Header.tsx
rename to website/src/components/Header/Header.tsx
index c996bb5e..67b0d53c 100644
--- a/website/src/components/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -6,9 +6,9 @@ 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 { Container } from "src/components/Container";
import { NavLinks } from "./NavLinks";
+import { UserMenu } from "./UserMenu";
function MenuIcon(props) {
return (
@@ -45,9 +45,9 @@ function AccountButton() {
return;
}
return (
-
+
}>
- Log in
+ Sign in
);
@@ -113,7 +113,7 @@ export function Header() {
)}
-
+
diff --git a/website/src/components/Header/NavLinks.stories.jsx b/website/src/components/Header/NavLinks.stories.jsx
new file mode 100644
index 00000000..f7fafae2
--- /dev/null
+++ b/website/src/components/Header/NavLinks.stories.jsx
@@ -0,0 +1,14 @@
+import { NavLinks } from "./NavLinks";
+
+export default {
+ title: "Header/NavLinks",
+ component: NavLinks,
+};
+
+const Template = (args) => (
+
+
+
+);
+
+export const Default = Template.bind({});
diff --git a/website/src/components/NavLinks.tsx b/website/src/components/Header/NavLinks.tsx
similarity index 100%
rename from website/src/components/NavLinks.tsx
rename to website/src/components/Header/NavLinks.tsx
diff --git a/website/src/components/Header/UserMenu.stories.jsx b/website/src/components/Header/UserMenu.stories.jsx
new file mode 100644
index 00000000..3c489617
--- /dev/null
+++ b/website/src/components/Header/UserMenu.stories.jsx
@@ -0,0 +1,25 @@
+import { SessionContext } from "next-auth/react";
+import React from "react";
+
+import UserMenu from "./UserMenu";
+
+export default {
+ title: "Header/UserMenu",
+ component: UserMenu,
+};
+
+const Template = (args) => {
+ var { session } = args;
+ return (
+
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" } };
diff --git a/website/src/components/Avatar.tsx b/website/src/components/Header/UserMenu.tsx
similarity index 90%
rename from website/src/components/Avatar.tsx
rename to website/src/components/Header/UserMenu.tsx
index d5706946..e3b0d819 100644
--- a/website/src/components/Avatar.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -5,18 +5,18 @@ import { Popover } from "@headlessui/react";
import { AnimatePresence, motion } from "framer-motion";
import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
-export function Avatar() {
+export function UserMenu() {
const { data: session } = useSession();
if (!session) {
return <>>;
}
if (session && session.user) {
- const displayName = session.user.name || session.user.email;
+ const email = session.user.email;
const accountOptions = [
{
name: "Account Settings",
- href: "#",
+ href: "/account",
desc: "Account Settings",
icon: FaCog,
//For future use
@@ -35,8 +35,7 @@ export function Avatar() {
height="40"
className="rounded-full"
>
-
{displayName}
- {/* Will be changed to username once it is implemented */}
+
{session.user.name || session.user.email}