Initial commit

Created from https://vercel.com/new

components/pages/Settings.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+import Page from 'components/layout/Page';
+import MenuLayout from 'components/layout/MenuLayout';
+import WebsiteSettings from '../settings/WebsiteSettings';
+import AccountSettings from '../settings/AccountSettings';
+import ProfileSettings from '../settings/ProfileSettings';
+import { useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+
+const WEBSITES = '/settings';
+const ACCOUNTS = '/settings/accounts';
+const PROFILE = '/settings/profile';
+
+export default function Settings() {
+  const user = useSelector(state => state.user);
+  const [option, setOption] = useState(WEBSITES);
+  const router = useRouter();
+  const { pathname } = router;
+
+  const menuOptions = [
+    {
+      label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
+      value: WEBSITES,
+    },
+    {
+      label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
+      value: ACCOUNTS,
+      hidden: !user?.is_admin,
+    },
+    {
+      label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
+      value: PROFILE,
+    },
+  ];
+
+  return (
+    <Page>
+      <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
+        {pathname === WEBSITES && <WebsiteSettings />}
+        {pathname === ACCOUNTS && <AccountSettings />}
+        {pathname === PROFILE && <ProfileSettings />}
+      </MenuLayout>
+    </Page>
+  );
+}