diff --git a/src/pages/SettingsPage.css b/src/pages/SettingsPage.css
index cf2c2efa..f9c00598 100644
--- a/src/pages/SettingsPage.css
+++ b/src/pages/SettingsPage.css
@@ -7,6 +7,19 @@
margin-bottom: 20px;
}
+.settings .banner {
+ width: 300px;
+ height: 150px;
+ background-size: cover;
+ margin-bottom: 20px;
+}
+
+.settings .image-settings {
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
.settings .avatar .edit {
display: flex;
align-items: center;
diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js
index ffb0e3b8..620725e6 100644
--- a/src/pages/SettingsPage.js
+++ b/src/pages/SettingsPage.js
@@ -28,6 +28,7 @@ export default function SettingsPage(props) {
const [name, setName] = useState("");
const [displayName, setDisplayName] = useState("");
const [picture, setPicture] = useState("");
+ const [banner, setBanner] = useState("");
const [about, setAbout] = useState("");
const [website, setWebsite] = useState("");
const [nip05, setNip05] = useState("");
@@ -35,11 +36,14 @@ export default function SettingsPage(props) {
const [lud16, setLud16] = useState("");
const [newRelay, setNewRelay] = useState("");
+ const avatarPicture = picture.length === 0 ? Nostrich : picture
+
useEffect(() => {
if (user) {
setName(user.name ?? "");
setDisplayName(user.display_name ?? "")
setPicture(user.picture ?? "");
+ setBanner(user.banner ?? "");
setAbout(user.about ?? "");
setWebsite(user.website ?? "");
setNip05(user.nip05 ?? "");
@@ -56,6 +60,7 @@ export default function SettingsPage(props) {
display_name: displayName,
about,
picture,
+ banner,
website,
nip05,
lud16
@@ -86,17 +91,26 @@ export default function SettingsPage(props) {
publisher.broadcast(ev);
}
- async function setNewAvatar() {
+ async function uploadFile() {
let file = await openFile();
console.log(file);
let rsp = await VoidUpload(file);
if (!rsp) {
throw "Upload failed, please try again later";
}
- console.log(rsp);
+ return rsp
+ }
+
+ async function setNewAvatar() {
+ const rsp = await uploadFile()
setPicture(rsp.metadata.url ?? `https://void.cat/d/${rsp.id}`)
}
+ async function setNewBanner() {
+ const rsp = await uploadFile()
+ setBanner(rsp.metadata.url ?? `https://void.cat/d/${rsp.id}`)
+ }
+
async function saveRelays() {
let ev = await publisher.saveRelays();
publisher.broadcast(ev);
@@ -175,10 +189,19 @@ export default function SettingsPage(props) {
return (
<>
Settings
-