diff --git a/packages/dashboard-v2/src/components/Button/Button.js b/packages/dashboard-v2/src/components/Button/Button.js index 40ec1ad9..c96276a1 100644 --- a/packages/dashboard-v2/src/components/Button/Button.js +++ b/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 - ${$primary ? "bg-primary" : "bg-white border-2 border-black"}`, + 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"} + ${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, }; diff --git a/packages/dashboard-v2/src/components/Icons/icons/TrashIcon.js b/packages/dashboard-v2/src/components/Icons/icons/TrashIcon.js new file mode 100644 index 00000000..7a4b222c --- /dev/null +++ b/packages/dashboard-v2/src/components/Icons/icons/TrashIcon.js @@ -0,0 +1,10 @@ +import { withIconProps } from "../withIconProps"; + +export const TrashIcon = withIconProps(({ size, ...props }) => ( + + + +)); diff --git a/packages/dashboard-v2/src/components/Icons/index.js b/packages/dashboard-v2/src/components/Icons/index.js index 611acef4..beaf1789 100644 --- a/packages/dashboard-v2/src/components/Icons/index.js +++ b/packages/dashboard-v2/src/components/Icons/index.js @@ -13,3 +13,4 @@ export * from "./icons/SearchIcon"; export * from "./icons/CopyIcon"; export * from "./icons/ShareIcon"; export * from "./icons/SimpleUploadIcon"; +export * from "./icons/TrashIcon"; diff --git a/packages/dashboard-v2/src/layouts/UserSettingsLayout.js b/packages/dashboard-v2/src/layouts/UserSettingsLayout.js index 9fda613d..2ca769bc 100644 --- a/packages/dashboard-v2/src/layouts/UserSettingsLayout.js +++ b/packages/dashboard-v2/src/layouts/UserSettingsLayout.js @@ -45,7 +45,7 @@ const Sidebar = () => ( Notifications - Import / Export + Export API Keys diff --git a/packages/dashboard-v2/src/pages/settings/api-keys.js b/packages/dashboard-v2/src/pages/settings/api-keys.js index 56d6977e..8ed8b1c8 100644 --- a/packages/dashboard-v2/src/pages/settings/api-keys.js +++ b/packages/dashboard-v2/src/pages/settings/api-keys.js @@ -1,11 +1,65 @@ -import * as React from "react"; +import useSWR from "swr"; +import dayjs from "dayjs"; import UserSettingsLayout from "../../layouts/UserSettingsLayout"; +import { TextInputBasic } from "../../components/TextInputBasic"; +import { Button } from "../../components/Button"; +import { TrashIcon } from "../../components/Icons"; + const APIKeysPage = () => { + const { data: apiKeys } = useSWR("user/apikeys"); + return ( <> -

API Keys

+
+
+
+

API Keys

+

+ At vero eos et caritatem, quae sine metu contineret, saluti prospexit civium, qua. Laudem et dolorem + aspernari ut ad naturam aut fu. +

+
+
+
+
+ +
+ +
+
+
+ {apiKeys?.length > 0 && ( +
+
API Keys
+
    + {apiKeys.map(({ id, name, createdAt }) => ( +
  • + {name || id} + + {dayjs(createdAt).format("MMM DD, YYYY")} + + + +
    • + ))} +
+
+ )} +
+
+ +
+
); }; diff --git a/packages/dashboard-v2/src/pages/settings/export.js b/packages/dashboard-v2/src/pages/settings/export.js index feac6719..ad05f5ff 100644 --- a/packages/dashboard-v2/src/pages/settings/export.js +++ b/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 ( <> -

Import / export

+
+
+
+

Export

+

+ Et quidem exercitus quid ex eo delectu rerum, quem modo ista sis aequitate. Probabo, inquit, modo dixi, + constituto. +

+
+
+
+
    +
  • + Upload history +
    • +
  • + Download history +
    • +
  • + Pinned files +
    • +
+ +
+
+
+ +
+
); }; diff --git a/packages/dashboard-v2/static/images/import-export.svg b/packages/dashboard-v2/static/images/import-export.svg new file mode 100644 index 00000000..d885686e --- /dev/null +++ b/packages/dashboard-v2/static/images/import-export.svg @@ -0,0 +1 @@ +