feat(dashboard-v2): add Export page

packages/dashboard-v2/src/components/Button/Button.js

@@ -4,18 +4,24 @@ import styled from "styled-components";
 /**
  * Primary UI component for user interaction
  */
-export const Button = styled.button.attrs(({ $primary }) => ({
+export const Button = styled.button.attrs(({ disabled, $primary }) => ({
   type: "button",
-  className: `px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600 transition-[filter] hover:brightness-90
+  className: `px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600 transition-[filter]
-            ${$primary ? "bg-primary" : "bg-white border-2 border-black"}`,
+            ${$primary ? "bg-primary" : "bg-white border-2 border-black"}
+            ${disabled ? "saturate-50 brightness-125 cursor-default text-palette-400" : "hover:brightness-90"}`,
 }))``;
 Button.propTypes = {
   /**
    * Is this the principal call to action on the page?
    */
   $primary: PropTypes.bool,
+  /**
+   * Prevent interaction on the button
+   */
+  disabled: PropTypes.bool,
 };
 
 Button.defaultProps = {
   $primary: false,
+  disabled: false,
 };

packages/dashboard-v2/src/layouts/UserSettingsLayout.js

@@ -45,7 +45,7 @@ const Sidebar = () => (
         Notifications
       </SidebarLink>
       <SidebarLink activeClassName="!border-l-primary" to="/settings/export">
-        Import / Export
+        Export
       </SidebarLink>
       <SidebarLink activeClassName="!border-l-primary" to="/settings/api-keys">
         API Keys

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

@@ -1,11 +1,69 @@
-import * as React from "react";
+import { useState } from "react";
 
 import UserSettingsLayout from "../../layouts/UserSettingsLayout";
 
+import { Switch } from "../../components/Switch";
+import { Button } from "../../components/Button";
+
+const useExportOptions = () => {
+  const [pinnedFiles, setPinnedFiles] = useState(false);
+  const [uploadHistory, setUploadHistory] = useState(false);
+  const [downloadHistory, setDownloadHistory] = useState(false);
+
+  const selectedOptions = {
+    pinnedFiles,
+    uploadHistory,
+    downloadHistory,
+  };
+
+  return {
+    selectedOptions: Object.keys(selectedOptions).filter((o) => selectedOptions[o]),
+    setPinnedFiles,
+    setUploadHistory,
+    setDownloadHistory,
+  };
+};
+
 const ExportPage = () => {
+  const { selectedOptions, setPinnedFiles, setUploadHistory, setDownloadHistory } = useExportOptions();
+
   return (
     <>
-      <h4>Import / export</h4>
+      <div className="flex flex-col xl:flex-row">
+        <div className="flex flex-col gap-10 lg:shrink-0 lg:max-w-[576px] xl:max-w-[524px]">
+          <section>
+            <h4>Export</h4>
+            <p>
+              Et quidem exercitus quid ex eo delectu rerum, quem modo ista sis aequitate. Probabo, inquit, modo dixi,
+              constituto.
+            </p>
+          </section>
+          <hr />
+          <section className="flex flex-col gap-8">
+            <ul className="flex flex-col gap-2">
+              <li>
+                <Switch onChange={setUploadHistory}>Upload history</Switch>
+              </li>
+              <li>
+                <Switch onChange={setDownloadHistory}>Download history</Switch>
+              </li>
+              <li>
+                <Switch onChange={setPinnedFiles}>Pinned files</Switch>
+              </li>
+            </ul>
+            <Button
+              $primary
+              disabled={selectedOptions.length === 0}
+              onClick={() => console.log("TODO: actually export:", selectedOptions)}
+            >
+              Export
+            </Button>
+          </section>
+        </div>
+        <div className="hidden xl:block w-full text-right pt-20 pr-6">
+          <img src="/images/import-export.svg" alt="" className="inline-block w-[200px]" />
+        </div>
+      </div>
     </>
   );
 };

packages/dashboard-v2/static/images/import-export.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193 114"><defs><style>.cls-1{fill:#00c65e;}.cls-2,.cls-3{fill:none;stroke:#0d0d0d;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"><rect class="cls-1" x="79" y="10" width="40" height="40" rx="2"/><path class="cls-2" d="M149,49l-8,8-8-8M91,57h4m4,0h4m4,0h4m18,20V73H105V85"/><path class="cls-2" d="M105,85h16l8-8h32v36H105ZM61,5V1H37V13"/><path class="cls-2" d="M37,13H53l8-8H93V41H37Zm66,4h30a8,8,0,0,1,8,8V57M95,97H69a8,8,0,0,1-8-8V57"/><path class="cls-3" d="M29,69H0m34,9H15M44,58H25M164,28h29m-34,9h19M149,17h19"/></g></g></svg>