From 86a7f0358b5c82dca4c2cb53d42d079caffa7022 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 15 Mar 2022 15:58:02 +0100
Subject: [PATCH] feat(dashboard-v2): add Settings/Notifications page

---
 .../src/pages/settings/api-keys.js            | 15 ++++++
 .../dashboard-v2/src/pages/settings/export.js | 15 ++++++
 .../dashboard-v2/src/pages/settings/index.js  | 15 ++++++
 .../src/pages/settings/notifications.js       | 53 +++++++++++++++++++
 packages/dashboard-v2/static/images/inbox.svg |  1 +
 5 files changed, 99 insertions(+)
 create mode 100644 packages/dashboard-v2/src/pages/settings/api-keys.js
 create mode 100644 packages/dashboard-v2/src/pages/settings/export.js
 create mode 100644 packages/dashboard-v2/src/pages/settings/index.js
 create mode 100644 packages/dashboard-v2/src/pages/settings/notifications.js
 create mode 100644 packages/dashboard-v2/static/images/inbox.svg

diff --git a/packages/dashboard-v2/src/pages/settings/api-keys.js b/packages/dashboard-v2/src/pages/settings/api-keys.js
new file mode 100644
index 00000000..56d6977e
--- /dev/null
+++ b/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;
diff --git a/packages/dashboard-v2/src/pages/settings/export.js b/packages/dashboard-v2/src/pages/settings/export.js
new file mode 100644
index 00000000..feac6719
--- /dev/null
+++ b/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;
diff --git a/packages/dashboard-v2/src/pages/settings/index.js b/packages/dashboard-v2/src/pages/settings/index.js
new file mode 100644
index 00000000..500c62a8
--- /dev/null
+++ b/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;
diff --git a/packages/dashboard-v2/src/pages/settings/notifications.js b/packages/dashboard-v2/src/pages/settings/notifications.js
new file mode 100644
index 00000000..c4efeb35
--- /dev/null
+++ b/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;
diff --git a/packages/dashboard-v2/static/images/inbox.svg b/packages/dashboard-v2/static/images/inbox.svg
new file mode 100644
index 00000000..389be116
--- /dev/null
+++ b/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>
\ No newline at end of file