forked from Kieran/snort
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 { profileLink } from "../Util";
|
||||
|
||||
export default function ProfileImage(props) {
|
||||
const pubkey = props.pubkey;
|
||||
const subHeader = props.subHeader;
|
||||
export default function ProfileImage({ pubkey, subHeader, showUsername = true }) {
|
||||
const navigate = useNavigate();
|
||||
const user = useProfile(pubkey);
|
||||
|
||||
@ -25,10 +23,12 @@ export default function ProfileImage(props) {
|
||||
return (
|
||||
<div className="pfp">
|
||||
<img src={hasImage ? user.picture : Nostrich} onClick={() => navigate(profileLink(pubkey))} />
|
||||
{showUsername && (
|
||||
<div>
|
||||
<Link key={pubkey} to={profileLink(pubkey)}>{name}</Link>
|
||||
{subHeader ? <div>{subHeader}</div> : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,3 +1,7 @@
|
||||
.notifications {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.unread-count {
|
||||
margin-left: .2em;
|
||||
}
|
||||
|
@ -54,14 +54,18 @@ export default function Layout(props) {
|
||||
}
|
||||
|
||||
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 (
|
||||
<>
|
||||
<div className="btn btn-rnd notifications" onClick={(e) => goToNotifications(e)}>
|
||||
<FontAwesomeIcon icon={faBell} size="xl" />
|
||||
{unreadNotifications !== 0 && (
|
||||
<span className="unread-count">
|
||||
{unreadNotifications}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<ProfileImage pubkey={key} />
|
||||
<ProfileImage pubkey={key} showUsername={false} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -18,6 +18,10 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile .avatar-wrapper {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.profile .avatar {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
@ -25,6 +29,20 @@
|
||||
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) {
|
||||
.profile {
|
||||
flex-direction: column;
|
||||
|
@ -40,7 +40,12 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
||||
<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">
|
||||
<div className="btn" onClick={(e) => setShowLnQr(true)}>
|
||||
@ -56,11 +61,11 @@ export default function ProfilePage() {
|
||||
return (
|
||||
<>
|
||||
<div className="profile flex">
|
||||
<div>
|
||||
<div className="avatar-wrapper">
|
||||
<div style={{ backgroundImage: `url(${(user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture})` }} className="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div className="f-grow">
|
||||
<div className="f-grow details">
|
||||
{details()}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -3,8 +3,9 @@
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background-size: cover;
|
||||
border-radius: 10px;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings .avatar .edit {
|
||||
|
Loading…
Reference in New Issue
Block a user