2023-01-19 15:23:51 +00:00
|
|
|
import "./NoteToSelf.css";
|
|
|
|
import { Link, useNavigate } from "react-router-dom";
|
2023-02-08 21:10:26 +00:00
|
|
|
import { FormattedMessage } from "react-intl";
|
2023-01-19 15:23:51 +00:00
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
2023-02-07 20:04:50 +00:00
|
|
|
import { faBook, faCertificate } from "@fortawesome/free-solid-svg-icons";
|
2023-01-27 21:38:41 +00:00
|
|
|
import { useUserProfile } from "Feed/ProfileFeed";
|
2023-01-20 11:11:50 +00:00
|
|
|
import Nip05 from "Element/Nip05";
|
|
|
|
import { profileLink } from "Util";
|
2023-01-19 15:23:51 +00:00
|
|
|
|
2023-02-08 21:10:26 +00:00
|
|
|
import messages from "./messages";
|
|
|
|
|
2023-01-19 15:23:51 +00:00
|
|
|
export interface NoteToSelfProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
pubkey: string;
|
|
|
|
clickable?: boolean;
|
|
|
|
className?: string;
|
|
|
|
link?: string;
|
|
|
|
}
|
2023-01-19 15:23:51 +00:00
|
|
|
|
2023-02-07 19:47:57 +00:00
|
|
|
function NoteLabel({ pubkey }: NoteToSelfProps) {
|
2023-02-07 20:04:50 +00:00
|
|
|
const user = useUserProfile(pubkey);
|
|
|
|
return (
|
|
|
|
<div>
|
2023-02-09 12:26:54 +00:00
|
|
|
<FormattedMessage {...messages.NoteToSelf} /> <FontAwesomeIcon icon={faCertificate} size="xs" />
|
2023-02-07 20:04:50 +00:00
|
|
|
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
|
|
|
</div>
|
|
|
|
);
|
2023-01-19 15:23:51 +00:00
|
|
|
}
|
|
|
|
|
2023-02-09 12:26:54 +00:00
|
|
|
export default function NoteToSelf({ pubkey, clickable, className, link }: NoteToSelfProps) {
|
2023-02-07 20:04:50 +00:00
|
|
|
const navigate = useNavigate();
|
2023-01-19 15:23:51 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
const clickLink = () => {
|
|
|
|
if (clickable) {
|
|
|
|
navigate(link ?? profileLink(pubkey));
|
2023-01-19 15:23:51 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
};
|
2023-01-19 15:23:51 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
|
|
|
<div className={`nts${className ? ` ${className}` : ""}`}>
|
|
|
|
<div className="avatar-wrapper">
|
|
|
|
<div className={`avatar${clickable ? " clickable" : ""}`}>
|
2023-02-09 12:26:54 +00:00
|
|
|
<FontAwesomeIcon onClick={clickLink} className="note-to-self" icon={faBook} size="2xl" />
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="f-grow">
|
|
|
|
<div className="name">
|
|
|
|
{(clickable && (
|
|
|
|
<Link to={link ?? profileLink(pubkey)}>
|
|
|
|
<NoteLabel pubkey={pubkey} />
|
|
|
|
</Link>
|
|
|
|
)) || <NoteLabel pubkey={pubkey} />}
|
2023-01-19 15:23:51 +00:00
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2023-01-19 15:23:51 +00:00
|
|
|
}
|