snort/src/Element/NoteToSelf.tsx

import "./NoteToSelf.css";

import { Link, useNavigate } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBook, faCertificate } from "@fortawesome/free-solid-svg-icons";
import { useUserProfile } from "Feed/ProfileFeed";
import Nip05 from "Element/Nip05";
import { profileLink } from "Util";

export interface NoteToSelfProps {
  pubkey: string;
  clickable?: boolean;
  className?: string;
  link?: string;
}

function NoteLabel({ pubkey, link }: NoteToSelfProps) {
  const user = useUserProfile(pubkey);
  return (
    <div>
      Note to Self <FontAwesomeIcon icon={faCertificate} size="xs" />
      {user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
    </div>
  );
}

export default function NoteToSelf({
  pubkey,
  clickable,
  className,
  link,
}: NoteToSelfProps) {
  const navigate = useNavigate();

  const clickLink = () => {
    if (clickable) {
      navigate(link ?? profileLink(pubkey));
    }
  };

  return (
    <div className={`nts${className ? ` ${className}` : ""}`}>
      <div className="avatar-wrapper">
        <div className={`avatar${clickable ? " clickable" : ""}`}>
          <FontAwesomeIcon
            onClick={clickLink}
            className="note-to-self"
            icon={faBook}
            size="2xl"
          />
        </div>
      </div>
      <div className="f-grow">
        <div className="name">
          {(clickable && (
            <Link to={link ?? profileLink(pubkey)}>
              <NoteLabel pubkey={pubkey} />
            </Link>
          )) || <NoteLabel pubkey={pubkey} />}
        </div>
      </div>
    </div>
  );
}