mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 15:43:20 +00:00
e86101ae7f
* remove nip-07 extension sign-in temporarily * bring kind-1 back! * separated relay views
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
/** @jsx h */
|
|
import { h } from "https://esm.sh/preact@10.17.1";
|
|
import { emitFunc } from "../event-bus.ts";
|
|
import { ProfileData } from "../features/profile.ts";
|
|
import { PublicKey } from "../../libs/nostr.ts/key.ts";
|
|
import { Avatar } from "./components/avatar.tsx";
|
|
import { DividerClass } from "./components/tw.ts";
|
|
import { ViewUserDetail } from "./message-panel.tsx";
|
|
import { cardBackgroundColor, HintLinkColor, HintTextColor, LinkColor } from "./style/colors.ts";
|
|
import { robohash } from "./relay-detail.tsx";
|
|
|
|
export function ProfileCard(props: {
|
|
profileData?: ProfileData;
|
|
publicKey: PublicKey;
|
|
emit: emitFunc<ViewUserDetail>;
|
|
}) {
|
|
const { profileData, publicKey, emit } = props;
|
|
const styles = {
|
|
container:
|
|
`px-4 mb-1 mobile:px-2 py-1 text-[${HintTextColor}] hover:underline rounded bg-[${cardBackgroundColor}] border-l-2 border-[${HintLinkColor}] max-w-sm cursor-pointer gorup`,
|
|
profile: {
|
|
container: `flex items-center`,
|
|
avatar: `w-8 h-8`,
|
|
name: `text-base font-bold truncate ml-2 text-[${LinkColor}]`,
|
|
},
|
|
divider: `${DividerClass} my-[0.5rem]`,
|
|
about: `text-sm`,
|
|
};
|
|
|
|
const onClick = () =>
|
|
emit({
|
|
type: "ViewUserDetail",
|
|
pubkey: publicKey,
|
|
});
|
|
|
|
return (
|
|
<div class={styles.container} onClick={onClick}>
|
|
<div class={styles.profile.container}>
|
|
<Avatar
|
|
class={styles.profile.avatar}
|
|
picture={profileData?.picture || robohash(props.publicKey.hex)}
|
|
>
|
|
</Avatar>
|
|
<p class={styles.profile.name}>
|
|
{profileData?.name || publicKey.bech32()}
|
|
</p>
|
|
</div>
|
|
<div class={styles.divider}></div>
|
|
<p class={styles.about}>{profileData?.about}</p>
|
|
</div>
|
|
);
|
|
}
|