mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 15:43:20 +00:00
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
/** @jsx h */
|
|
import { Component } from "https://esm.sh/preact@10.17.1";
|
|
import { h } from "https://esm.sh/preact@10.17.1";
|
|
import { tw } from "https://esm.sh/twind@0.16.16";
|
|
import { emitFunc } from "../event-bus.ts";
|
|
import { ProfileData } from "../features/profile.ts";
|
|
import { PublicKey } from "../lib/nostr-ts/key.ts";
|
|
import { Avatar } from "./components/avatar.tsx";
|
|
import { DividerClass } from "./components/tw.ts";
|
|
import { ViewUserDetail } from "./message-panel.tsx";
|
|
import { HoverButtonBackgroudColor, PrimaryTextColor } from "./style/colors.ts";
|
|
|
|
export function ProfileCard(props: {
|
|
profileData?: ProfileData;
|
|
publicKey: PublicKey;
|
|
emit: emitFunc<ViewUserDetail>;
|
|
}) {
|
|
const { profileData, publicKey, emit } = props;
|
|
const styles = {
|
|
container:
|
|
tw`px-4 py-2 my-1 text-[${PrimaryTextColor}] border-2 border-[${PrimaryTextColor}4D] rounded-lg hover:bg-[${HoverButtonBackgroudColor}] cursor-pointer py-1 bg-[#36393F] max-w-sm`,
|
|
profile: {
|
|
container: tw`flex`,
|
|
avatar: tw`w-10 h-10`,
|
|
name: tw`text-[1.2rem] font-blod leading-10 truncate ml-2`,
|
|
},
|
|
divider: tw`${DividerClass} my-[0.5rem]`,
|
|
about: tw`text-[0.8rem]`,
|
|
};
|
|
|
|
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}></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>
|
|
);
|
|
}
|