2023-01-01 19:57:27 +00:00
|
|
|
import "./ProfilePreview.css";
|
2023-01-19 00:03:24 +00:00
|
|
|
import { ReactNode } from "react";
|
|
|
|
|
2023-01-20 11:11:50 +00:00
|
|
|
import ProfileImage from "Element/ProfileImage";
|
|
|
|
import FollowButton from "Element/FollowButton";
|
2023-01-27 21:38:41 +00:00
|
|
|
import { useUserProfile } from "Feed/ProfileFeed";
|
2023-01-20 11:11:50 +00:00
|
|
|
import { HexKey } from "Nostr";
|
2023-01-19 15:21:13 +00:00
|
|
|
import { useInView } from "react-intersection-observer";
|
2023-01-01 19:57:27 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export interface ProfilePreviewProps {
|
|
|
|
pubkey: HexKey,
|
|
|
|
options?: {
|
|
|
|
about?: boolean
|
2023-01-19 00:03:24 +00:00
|
|
|
},
|
2023-01-28 16:31:03 +00:00
|
|
|
actions?: ReactNode,
|
|
|
|
className?: string
|
2023-01-16 17:48:25 +00:00
|
|
|
}
|
|
|
|
export default function ProfilePreview(props: ProfilePreviewProps) {
|
2023-01-01 19:57:27 +00:00
|
|
|
const pubkey = props.pubkey;
|
2023-01-27 21:38:41 +00:00
|
|
|
const user = useUserProfile(pubkey);
|
2023-01-19 15:21:13 +00:00
|
|
|
const { ref, inView } = useInView({ triggerOnce: true });
|
2023-01-10 10:30:33 +00:00
|
|
|
const options = {
|
|
|
|
about: true,
|
|
|
|
...props.options
|
|
|
|
};
|
2023-01-01 19:57:27 +00:00
|
|
|
|
|
|
|
return (
|
2023-01-28 16:31:03 +00:00
|
|
|
<div className={`profile-preview${props.className ? ` ${props.className}` : ""}`} ref={ref}>
|
2023-01-19 15:21:13 +00:00
|
|
|
{inView && <>
|
|
|
|
<ProfileImage pubkey={pubkey} subHeader=
|
|
|
|
{options.about ? <div className="f-ellipsis about">
|
|
|
|
{user?.about}
|
|
|
|
</div> : undefined} />
|
2023-02-05 22:44:31 +00:00
|
|
|
{props.actions ?? (
|
|
|
|
<div className="follow-button-container">
|
|
|
|
<FollowButton pubkey={pubkey} />
|
|
|
|
</div>
|
|
|
|
)}
|
2023-01-19 15:21:13 +00:00
|
|
|
</>}
|
2023-01-01 19:57:27 +00:00
|
|
|
</div>
|
|
|
|
)
|
2023-01-27 21:38:41 +00:00
|
|
|
}
|