add header editor to settings
This commit is contained in:
parent
7c6483b991
commit
8e86728222
@ -103,7 +103,7 @@ export default function ProfilePage() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="profile flex">
|
<div className="profile flex">
|
||||||
<img className="banner" src={user?.banner ? user.banner : avatarUrl} />
|
<img alt="banner" className="banner" src={user?.banner ? user.banner : avatarUrl} />
|
||||||
<div className="avatar-wrapper">
|
<div className="avatar-wrapper">
|
||||||
<div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
|
<div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
|
||||||
</div>
|
</div>
|
||||||
|
@ -7,6 +7,19 @@
|
|||||||
margin-bottom: 20px;
|
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 {
|
.settings .avatar .edit {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -28,6 +28,7 @@ export default function SettingsPage(props) {
|
|||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [displayName, setDisplayName] = useState("");
|
const [displayName, setDisplayName] = useState("");
|
||||||
const [picture, setPicture] = useState("");
|
const [picture, setPicture] = useState("");
|
||||||
|
const [banner, setBanner] = useState("");
|
||||||
const [about, setAbout] = useState("");
|
const [about, setAbout] = useState("");
|
||||||
const [website, setWebsite] = useState("");
|
const [website, setWebsite] = useState("");
|
||||||
const [nip05, setNip05] = useState("");
|
const [nip05, setNip05] = useState("");
|
||||||
@ -35,11 +36,14 @@ export default function SettingsPage(props) {
|
|||||||
const [lud16, setLud16] = useState("");
|
const [lud16, setLud16] = useState("");
|
||||||
const [newRelay, setNewRelay] = useState("");
|
const [newRelay, setNewRelay] = useState("");
|
||||||
|
|
||||||
|
const avatarPicture = picture.length === 0 ? Nostrich : picture
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user) {
|
if (user) {
|
||||||
setName(user.name ?? "");
|
setName(user.name ?? "");
|
||||||
setDisplayName(user.display_name ?? "")
|
setDisplayName(user.display_name ?? "")
|
||||||
setPicture(user.picture ?? "");
|
setPicture(user.picture ?? "");
|
||||||
|
setBanner(user.banner ?? "");
|
||||||
setAbout(user.about ?? "");
|
setAbout(user.about ?? "");
|
||||||
setWebsite(user.website ?? "");
|
setWebsite(user.website ?? "");
|
||||||
setNip05(user.nip05 ?? "");
|
setNip05(user.nip05 ?? "");
|
||||||
@ -56,6 +60,7 @@ export default function SettingsPage(props) {
|
|||||||
display_name: displayName,
|
display_name: displayName,
|
||||||
about,
|
about,
|
||||||
picture,
|
picture,
|
||||||
|
banner,
|
||||||
website,
|
website,
|
||||||
nip05,
|
nip05,
|
||||||
lud16
|
lud16
|
||||||
@ -86,17 +91,26 @@ export default function SettingsPage(props) {
|
|||||||
publisher.broadcast(ev);
|
publisher.broadcast(ev);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function setNewAvatar() {
|
async function uploadFile() {
|
||||||
let file = await openFile();
|
let file = await openFile();
|
||||||
console.log(file);
|
console.log(file);
|
||||||
let rsp = await VoidUpload(file);
|
let rsp = await VoidUpload(file);
|
||||||
if (!rsp) {
|
if (!rsp) {
|
||||||
throw "Upload failed, please try again later";
|
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}`)
|
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() {
|
async function saveRelays() {
|
||||||
let ev = await publisher.saveRelays();
|
let ev = await publisher.saveRelays();
|
||||||
publisher.broadcast(ev);
|
publisher.broadcast(ev);
|
||||||
@ -175,11 +189,20 @@ export default function SettingsPage(props) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>Settings</h1>
|
<h1>Settings</h1>
|
||||||
<div className="flex f-center">
|
<div className="flex f-center image-settings">
|
||||||
<div style={{ backgroundImage: `url(${picture.length === 0 ? Nostrich : picture})` }} className="avatar">
|
<div>
|
||||||
|
<h2>Avatar</h2>
|
||||||
|
<div style={{ backgroundImage: `url(${avatarPicture})` }} className="avatar">
|
||||||
<div className="edit" onClick={() => setNewAvatar()}>Edit</div>
|
<div className="edit" onClick={() => setNewAvatar()}>Edit</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Header</h2>
|
||||||
|
<div style={{ backgroundImage: `url(${banner.length === 0 ? avatarPicture : banner})` }} className="banner">
|
||||||
|
<div className="edit" onClick={() => setNewBanner()}>Edit</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{editor()}
|
{editor()}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user