88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
import * as React from "react";
|
|
import { Link } from "gatsby";
|
|
import styled from "styled-components";
|
|
import { SWRConfig } from "swr";
|
|
|
|
import { authenticatedOnly } from "../lib/swrConfig";
|
|
|
|
import { PageContainer } from "../components/PageContainer";
|
|
import { NavBar } from "../components/NavBar";
|
|
import { Footer } from "../components/Footer";
|
|
import { UserProvider, useUser } from "../contexts/user";
|
|
import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
|
|
|
|
const Wrapper = styled.div.attrs({
|
|
className: "min-h-screen overflow-hidden",
|
|
})`
|
|
background-image: url(/images/dashboard-bg.svg);
|
|
background-position: center -280px;
|
|
background-repeat: no-repeat;
|
|
`;
|
|
|
|
const Layout = ({ children }) => {
|
|
const { user } = useUser();
|
|
|
|
// Prevent from flashing the dashboard screen to unauthenticated users.
|
|
return (
|
|
<Wrapper>
|
|
{!user && (
|
|
<div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
|
|
<ContainerLoadingIndicator className="!text-palette-200/50" />
|
|
</div>
|
|
)}
|
|
{user && <>{children}</>}
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
const Sidebar = () => (
|
|
<aside className="w-full lg:w-48 bg-white text-sm font-sans font-light text-palette-600 shrink-0">
|
|
<nav>
|
|
<SidebarLink activeClassName="!border-l-primary" to="/settings">
|
|
Account
|
|
</SidebarLink>
|
|
<SidebarLink activeClassName="!border-l-primary" to="/settings/notifications">
|
|
Notifications
|
|
</SidebarLink>
|
|
<SidebarLink activeClassName="!border-l-primary" to="/settings/export">
|
|
Export
|
|
</SidebarLink>
|
|
<SidebarLink activeClassName="!border-l-primary" to="/settings/api-keys">
|
|
API Keys
|
|
</SidebarLink>
|
|
</nav>
|
|
</aside>
|
|
);
|
|
|
|
const SidebarLink = styled(Link).attrs({
|
|
className: `h-12 py-3 px-6 h-full w-full flex
|
|
border-l-2 border-l-palette-200
|
|
border-b border-b-palette-100 last:border-b-transparent`,
|
|
})``;
|
|
|
|
const Content = styled.main.attrs({
|
|
className: "relative bg-white rounded px-6 py-6 sm:px-16 sm:py-14 mt-6 lg:mt-0 bg-none xl:bg-corner-circle",
|
|
})`
|
|
background-repeat: no-repeat;
|
|
`;
|
|
|
|
const UserSettingsLayout = ({ children }) => (
|
|
<SWRConfig value={authenticatedOnly}>
|
|
<UserProvider>
|
|
<Layout>
|
|
<NavBar />
|
|
<PageContainer className="mt-2 md:mt-14">
|
|
<h6 className="hidden md:block mb-2 text-palette-400">Settings</h6>
|
|
<div className="flex flex-col lg:flex-row">
|
|
<Sidebar />
|
|
<Content className="lg:w-settings-lg xl:w-settings-xl">{children}</Content>
|
|
</div>
|
|
</PageContainer>
|
|
<Footer />
|
|
</Layout>
|
|
</UserProvider>
|
|
</SWRConfig>
|
|
);
|
|
|
|
export default UserSettingsLayout;
|