feat(dashboard-v2): add Settings/Notifications page

packages/dashboard-v2/src/pages/settings/api-keys.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import UserSettingsLayout from "../../layouts/UserSettingsLayout";
+
+const APIKeysPage = () => {
+  return (
+    <>
+      <h4>API Keys</h4>
+    </>
+  );
+};
+
+APIKeysPage.Layout = UserSettingsLayout;
+
+export default APIKeysPage;

packages/dashboard-v2/src/pages/settings/export.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import UserSettingsLayout from "../../layouts/UserSettingsLayout";
+
+const ExportPage = () => {
+  return (
+    <>
+      <h4>Import / export</h4>
+    </>
+  );
+};
+
+ExportPage.Layout = UserSettingsLayout;
+
+export default ExportPage;

packages/dashboard-v2/src/pages/settings/index.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import UserSettingsLayout from "../../layouts/UserSettingsLayout";
+
+const SettingsPage = () => {
+  return (
+    <>
+      <h4>Account</h4>
+    </>
+  );
+};
+
+SettingsPage.Layout = UserSettingsLayout;
+
+export default SettingsPage;

packages/dashboard-v2/src/pages/settings/notifications.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+import UserSettingsLayout from "../../layouts/UserSettingsLayout";
+
+import { Switch } from "../../components/Switch";
+import { StaticImage } from "gatsby-plugin-image";
+
+const NotificationsPage = () => {
+  return (
+    <>
+      <div className="flex">
+        <div className="flex flex-col gap-10 lg:shrink-0 lg:max-w-[576px] xl:max-w-[524px]">
+          <h4>Notifications</h4>
+          <section>
+            {/* TODO: saves on change */}
+            <Switch onChange={console.info.bind(console)} labelClassName="!items-start flex-col md:flex-row">
+              <span className="ml-2">
+                I agreee to get the latest news, updates and special offers delivered to my email inbox.
+              </span>
+            </Switch>
+          </section>
+          <hr />
+          <section>
+            <h6 className="text-palette-300">Statistics</h6>
+            {/* TODO: proper content :) */}
+            <p>
+              Si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec in malis. Si sine causa, mox
+              videro.
+            </p>
+
+            <ul className="mt-7 flex flex-col gap-2">
+              <li>
+                {/* TODO: saves on change */}
+                <Switch onChange={console.info.bind(console)}>Storage limit</Switch>
+              </li>
+              <li>
+                {/* TODO: saves on change */}
+                <Switch onChange={console.info.bind(console)}>File limit</Switch>
+              </li>
+            </ul>
+          </section>
+        </div>
+        <div className="text-right w-full pr-14 pt-20">
+          <StaticImage src="../../../static/images/inbox.svg" alt="" placeholder="none" />
+        </div>
+      </div>
+    </>
+  );
+};
+
+NotificationsPage.Layout = UserSettingsLayout;
+
+export default NotificationsPage;

packages/dashboard-v2/static/images/inbox.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171 126"><defs><style>.cls-1{fill:#40b75e;fill-rule:evenodd;}.cls-2,.cls-3{fill:none;stroke:#0f0f0f;stroke-width:2px;}.cls-2{stroke-linejoin:round;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M107.89,26.18a23.09,23.09,0,0,1,9.26,1.94l-9.26,21.06,22,6.63a23,23,0,1,1-22-29.63Z"/><path class="cls-2" d="M115.89,45.18l-10,10-6-6"/><path class="cls-2" d="M123.89,49.18a16,16,0,1,1-16-16A16,16,0,0,1,123.89,49.18Z"/><path class="cls-3" d="M156,45h14v80H46V45H60"/><path class="cls-3" d="M150,65V17L134,1H66V65"/><path class="cls-2" d="M72,9h56M72,17h56M108,77,46,125H170ZM46,45,86,85m84-40L130,85"/><path class="cls-3" d="M150,17H134V1M106,117h4m4,0h4m-20,0h4"/><path class="cls-3" d="M29,45H0m34,9H15M44,34H25"/></g></g></svg>