diff --git a/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js b/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
new file mode 100644
index 00000000..9f5bbc82
--- /dev/null
+++ b/packages/dashboard-v2/src/components/AvatarUploader/AvatarUploader.js
@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+import { useUser } from "../../contexts/user";
+import { SimpleUploadIcon } from "../Icons";
+
+const AVATAR_PLACEHOLDER = "/images/avatar-placeholder.svg";
+
+export const AvatarUploader = (props) => {
+ const { user } = useUser();
+ const [imageUrl, setImageUrl] = useState(AVATAR_PLACEHOLDER);
+
+ useEffect(() => {
+ setImageUrl(user.avatarUrl ?? AVATAR_PLACEHOLDER);
+ }, [user]);
+
+ return (
+
+
+
+
+
+
+ {/* TODO: actual uploading */}
+
+
+ );
+};
diff --git a/packages/dashboard-v2/src/components/AvatarUploader/index.js b/packages/dashboard-v2/src/components/AvatarUploader/index.js
new file mode 100644
index 00000000..74358cdc
--- /dev/null
+++ b/packages/dashboard-v2/src/components/AvatarUploader/index.js
@@ -0,0 +1 @@
+export * from "./AvatarUploader";
diff --git a/packages/dashboard-v2/src/pages/settings/index.js b/packages/dashboard-v2/src/pages/settings/index.js
index 500c62a8..459cf8c0 100644
--- a/packages/dashboard-v2/src/pages/settings/index.js
+++ b/packages/dashboard-v2/src/pages/settings/index.js
@@ -1,15 +1,81 @@
import * as React from "react";
+import { useMedia } from "react-use";
+import styled from "styled-components";
+import theme from "../../lib/theme";
import UserSettingsLayout from "../../layouts/UserSettingsLayout";
+import { TextInputBasic } from "../../components/TextInputBasic/TextInputBasic";
+import { Button } from "../../components/Button";
+import { AvatarUploader } from "../../components/AvatarUploader";
-const SettingsPage = () => {
+const FormGroup = styled.div.attrs({
+ className: "grid sm:grid-cols-[1fr_min-content] w-full gap-y-2 gap-x-4 items-end",
+})``;
+
+const AccountPage = () => {
+ const isLargeScreen = useMedia(`(min-width: ${theme.screens.xl})`);
return (
<>
- Account
+
+
+
+ Account
+
+ Tum dicere exorsus est laborum et quasi involuta aperiri, altera prompta et expedita. Primum igitur,
+ inquit, modo ista sis aequitate.
+
+
+
+ {!isLargeScreen && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The password must be at least 6 characters long. Significantly different from the email and old
+ password.
+
+
+
+
+
+ Delete account
+ This will completely delete your account. This process can't be undone.
+
+
+
+
+
>
);
};
-SettingsPage.Layout = UserSettingsLayout;
+AccountPage.Layout = UserSettingsLayout;
-export default SettingsPage;
+export default AccountPage;
diff --git a/packages/dashboard-v2/static/images/avatar-bg.svg b/packages/dashboard-v2/static/images/avatar-bg.svg
new file mode 100644
index 00000000..4095e0a0
--- /dev/null
+++ b/packages/dashboard-v2/static/images/avatar-bg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/dashboard-v2/static/images/avatar-placeholder.svg b/packages/dashboard-v2/static/images/avatar-placeholder.svg
new file mode 100644
index 00000000..8fae86b7
--- /dev/null
+++ b/packages/dashboard-v2/static/images/avatar-placeholder.svg
@@ -0,0 +1 @@
+
\ No newline at end of file