Start on header

2021-10-13 09:31:09 -05:00
parent 00e0aeb0d3
commit 58b62ee47c
3 changed files with 31 additions and 2 deletions
--- a/site/src/components/Header/index.jsx
+++ b/site/src/components/Header/index.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Auth0Provider } from "@auth0/auth0-react";
+import LoginButton from "../LoginButton";
+import LogoutButton from "../LogoutButton";
+import config from "../../config";
+import Styles from "./styles.module.scss";
+
+const Header = () => {
+  return (
+    <header>      
+      <Auth0Provider
+        domain={config.auth0.domain}
+        clientId={config.auth0.clientId}
+        redirectUri={window.location.origin}
+        audience={config.auth0.audience}
+        scope="read:stuff"
+      >
+        <LoginButton />
+        <LogoutButton />
+      </Auth0Provider>
+    </header>
+  );
+};
+
+export default Header;
--- a/site/src/components/Header/styles.module.scss
+++ b/site/src/components/Header/styles.module.scss
@@ -0,0 +1,4 @@
+header {
+    display: flex;
+    justify-content: flex-end;
+}
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -1,4 +1,5 @@
 ---
+import Header from "../components/Header/index.jsx";
 let { title } = Astro.props;
 ---
 <style lang="scss">
@@ -20,8 +21,7 @@ let { title } = Astro.props;
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 </head>
 <body>
-    <header>
-    </header>
+    <Header client:only />
    <main>
        <slot/>
    </main>