import React from "react";
import { Box, Button, HStack, IconButton, useColorMode } from "@chakra-ui/core";
import { Link } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import { ChevronLeftIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
import useCurrentUser from "./components/useCurrentUser";
import HomeLinkIcon from "../images/home-link-icon.png";
import HomeLinkIcon2x from "../images/home-link-icon@2x.png";
function PageLayout({ children, hideHomeLink }) {
return (
{!hideHomeLink && }
{children}
);
}
function HomeLink() {
return (
);
}
function UserLoginLogout(props) {
const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
const { id, username } = useCurrentUser();
if (isLoading) {
return null;
}
if (isAuthenticated) {
return (
{username && (
Hi, {username}!
)}
{id && (
)}
);
} else {
return (
);
}
}
function ColorModeToggleButton() {
const { colorMode, toggleColorMode } = useColorMode();
return (
: }
onClick={toggleColorMode}
variant="outline"
size="sm"
/>
);
}
export default PageLayout;