profile improvements
This commit is contained in:
parent
69eff595ff
commit
e3aa1dc548
@ -6,9 +6,7 @@ import { Link, useNavigate } from "react-router-dom";
|
|||||||
import useProfile from "../feed/ProfileFeed";
|
import useProfile from "../feed/ProfileFeed";
|
||||||
import { profileLink } from "../Util";
|
import { profileLink } from "../Util";
|
||||||
|
|
||||||
export default function ProfileImage(props) {
|
export default function ProfileImage({ pubkey, subHeader, showUsername = true }) {
|
||||||
const pubkey = props.pubkey;
|
|
||||||
const subHeader = props.subHeader;
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const user = useProfile(pubkey);
|
const user = useProfile(pubkey);
|
||||||
|
|
||||||
@ -25,10 +23,12 @@ export default function ProfileImage(props) {
|
|||||||
return (
|
return (
|
||||||
<div className="pfp">
|
<div className="pfp">
|
||||||
<img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(profileLink(pubkey))} />
|
<img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(profileLink(pubkey))} />
|
||||||
<div>
|
{showUsername && (
|
||||||
|
<div>
|
||||||
<Link key={pubkey} to={profileLink(pubkey)}>{name}</Link>
|
<Link key={pubkey} to={profileLink(pubkey)}>{name}</Link>
|
||||||
{subHeader ? <div>{subHeader}</div> : null}
|
{subHeader ? <div>{subHeader}</div> : null}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
@ -1,3 +1,7 @@
|
|||||||
.notifications {
|
.notifications {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.unread-count {
|
||||||
|
margin-left: .2em;
|
||||||
|
}
|
||||||
|
@ -54,14 +54,18 @@ export default function Layout(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function accountHeader() {
|
function accountHeader() {
|
||||||
const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length ?? 0;
|
const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="btn btn-rnd notifications" onClick={(e) => goToNotifications(e)}>
|
<div className="btn btn-rnd notifications" onClick={(e) => goToNotifications(e)}>
|
||||||
<FontAwesomeIcon icon={faBell} size="xl" />
|
<FontAwesomeIcon icon={faBell} size="xl" />
|
||||||
{unreadNotifications}
|
{unreadNotifications !== 0 && (
|
||||||
|
<span className="unread-count">
|
||||||
|
{unreadNotifications}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ProfileImage pubkey={key} />
|
<ProfileImage pubkey={key} showUsername={false} />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -18,6 +18,10 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile .avatar-wrapper {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.profile .avatar {
|
.profile .avatar {
|
||||||
width: 256px;
|
width: 256px;
|
||||||
height: 256px;
|
height: 256px;
|
||||||
@ -25,6 +29,20 @@
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile .details {
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .website {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .website::before {
|
||||||
|
content: '🔗 ';
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
@media(max-width: 720px) {
|
@media(max-width: 720px) {
|
||||||
.profile {
|
.profile {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -40,7 +40,12 @@ export default function ProfilePage() {
|
|||||||
</div>
|
</div>
|
||||||
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
||||||
<p>{extractLinks([user?.about])}</p>
|
<p>{extractLinks([user?.about])}</p>
|
||||||
{user?.website ? <a href={user?.website} target="_blank" rel="noreferrer">{user?.website}</a> : null}
|
|
||||||
|
{user?.website && (
|
||||||
|
<div className="website">
|
||||||
|
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{lnurl ? <div className="flex">
|
{lnurl ? <div className="flex">
|
||||||
<div className="btn" onClick={(e) => setShowLnQr(true)}>
|
<div className="btn" onClick={(e) => setShowLnQr(true)}>
|
||||||
@ -56,12 +61,12 @@ export default function ProfilePage() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="profile flex">
|
<div className="profile flex">
|
||||||
<div>
|
<div className="avatar-wrapper">
|
||||||
<div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
|
<div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="f-grow">
|
<div className="f-grow details">
|
||||||
{details()}
|
{details()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="tabs">
|
<div className="tabs">
|
||||||
|
@ -3,8 +3,9 @@
|
|||||||
width: 256px;
|
width: 256px;
|
||||||
height: 256px;
|
height: 256px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border-radius: 10px;
|
border-radius: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings .avatar .edit {
|
.settings .avatar .edit {
|
||||||
|
Loading…
Reference in New Issue
Block a user