Initial Storybook setup (#110)

* Storybook setup Storybook can be started using `npm run storybook` * moved files and bugfix Moved component files into their own directory and moved stories next to them. Fixed a bug with loading images * prettier and bugfix * prettier and bugfix * Absolute Import in Header.tsx * import fix some imports did not work after merging * Storybook update for chakra ui to properly work * Prettier main.js * comment in preview.js about hacky solution * webpack final update and prettier update to preview * Updated website/readme to include storybook description * prettier... * Delete docker-compose 2.yaml
2026-08-06 12:50:42 +08:00 · 2022-12-29 10:44:14 +01:00
parent a4e5f566a8
commit cb317ebccb
15 changed files with 28990 additions and 2592 deletions
@@ -0,0 +1,122 @@
+import { Button } from "@chakra-ui/react";
+import { Popover } from "@headlessui/react";
+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 { Container } from "src/components/Container";
+import { NavLinks } from "./NavLinks";
+import { UserMenu } from "./UserMenu";
+
+function MenuIcon(props) {
+  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" />
+    </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) {
+    return;
+  }
+  return (
+    <Link href="/auth/signin" aria-label="Home" className="flex items-center">
+      <Button variant="outline" leftIcon={<FaUser />}>
+        Sign in
+      </Button>
+    </Link>
+  );
+}
+
+export function Header() {
+  return (
+    <header className="bg-white">
+      <nav>
+        <Container className="relative 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" />
+              <span className="text-2xl font-bold ml-3">Open Assistant</span>
+            </Link>
+            <div className="hidden lg:flex lg:gap-10">
+              <NavLinks />
+            </div>
+          </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 />
+          </div>
+        </Container>
+      </nav>
+    </header>
+  );
+}